jquery - 单击下一个按钮 Jquery 时验证水平选项卡表单
问题描述
我正在尝试在单击Next按钮时使用 jquery 对我的水平选项卡表单进行一些验证。下面是我的标签页的 HTML 代码：
<div class="form-wrap">
<form action="functions.php" method="POST" id="quoteForm">
<!-- Swiper -->
<div class="swiper-container slider-form pb-5">
<div class="swiper-pagination"></div>
<div class="row tab-title">
<div class="col-md-4 py-3">Select A Service</div>
<div class="col-md-4 py-3">Choose Your Branch</div>
<div class="col-md-4 py-3">Personal Informations</div>
</div>
<div class="swiper-wrapper">
<div class="swiper-slide" id="service-type">
<div class="row mb-3">
<div class="col-lg-4 col-md-6">
<label>Car make<span>*</span></label>
<div class="select-custom">
<select class="form-control" name="carbrand" id="carbrand">
<option value="All">All</option>
<?php
$get=$config->getAllCarBrands();
while($row=$get->fetch(PDO::FETCH_ASSOC)){
?>
<option value="<?php echo $row['brand_id']; ?>"><?php echo $row['brand_name']; ?></option>
<?php
}
?>
</select>
<span class="req" id="brand_error" style="display: none">Required</span>
</div>
</div>
<div class="col-lg-4 col-md-6">
<label>Car range<span>*</span></label>
<div class="select-custom">
<select class="form-control" name="carrange" id="carrange">
<option value="All">All</option>
</select>
<span class="req" id="sub_brand_error" style="display: none">Required</span>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6 pt-4 border-right-1">
<div class="form-group border p-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1" name="carservices[]" value="Tyre Replacement">
<label class="custom-control-label" for="customCheck1">Tyre Replacement</label>
</div>
</div>
<div class="form-group border p-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2" name="carservices[]" value="Fitting and Balancing">
<label class="custom-control-label" for="customCheck2">Fitting and Balancing</label>
</div>
</div>
</div>
<div class="col-md-6 pt-4 pt-sm-0">
<div class="form-group border p-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck6" name="carservices[]" value="Battery">
<label class="custom-control-label" for="customCheck6">Battery</label>
</div>
</div>
<div class="form-group border p-2">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck7" name="carservices[]" value="Air Conditioning">
<label class="custom-control-label" for="customCheck7">Air Conditioning</label>
</div>
</div>
</div>
<span class="req" id="service_error" style="display: none">Required</span>
</div>
<div class="text-right btn-resize">
<!-- Add Arrows -->
<div class="form-btn-next w-auto" id="btn-selectservice">next <i class="icon-arrow-right"></i></div>
</div>
</div>
<div class="swiper-slide">
<label>Select a centre</label>
<div class="row">
<div class="col-md-12">
<div class="radio radio-scroller row">
<div class="radio-custom col-md-6 mb-3">
<input type="radio" name="selectedbranch" id="radio5" class="css-checkbox" value="Al Mushrif"/>
<label for="radio5" class="css-label radGroup1">
<div class="dealer-name mb-2">ABC</div>
<div class="dealer-address mb-1">Location, City</div>
</label>
</div>
<div class="radio-custom col-md-6 mb-3">
<input type="radio" name="selectedbranch" id="radio6" class="css-checkbox" value="Al Falah"/>
<label for="radio6" class="css-label radGroup1">
<div class="dealer-name mb-2">DEF</div>
<div class="dealer-address mb-1">location, City</div>
</label>
</div>
</div>
</div>
</div>
<div class="text-right btn-resize">
<!-- Add Arrows -->
<div class="form-btn-next w-auto">next <i class="icon-arrow-right"></i></div>
</div>
<div class="text-left btn-resize mt-4">
<!-- Add Arrows -->
<div class="form-btn-prev w-auto d-inline-block"><i class="icon-arrow-left"></i> Return to list</div>
</div>
</div>
<div class="swiper-slide" id="info-tab">
<div class="row mb-3">
<div class="col-md-4">
<label>Full name<span>*</span></label>
<input type="text" class="form-control" name="fullname" id="fullname">
</div>
<div class="form-group col-12 mt-3">
<label>I wish to be contacted by</label>
<div class="radio">
<div class="radio-custom">
<input type="radio" name="contactby" id="radio7" class="css-checkbox" value="Telephone or Email">
<label for="radio7" class="css-label radGroup1">Telephone or Email</label>
</div>
<div class="radio-custom">
<input type="radio" name="contactby" id="radio8" class="css-checkbox" checked="checked" value="Email only">
<label for="radio8" class="css-label radGroup1">Email only</label>
</div>
<div class="radio-custom">
<input type="radio" name="contactby" id="radio9" class="css-checkbox" value="Telephone only">
<label for="radio9" class="css-label radGroup1">Telephone only</label>
</div>
</div>
</div>
<div class="col-md-4">
<label>Email<span>*</span></label>
<input type="text" class="form-control" name="emailid" id="emailid">
</div>
<div class="col-md-4">
<label>Telephone number<span>*</span></label>
<input type="text" class="form-control" name="phoneno" id="phoneno">
</div>
</div>
<div class="text-right btn-resize">
<!-- Add Arrows -->
<input type="hidden" name="action" value="quote">
<input type="submit" class="form-btn-submit w-auto" name="submit" value="Submit">
</div>
<div class="text-left btn-resize mt-4">
<!-- Add Arrows -->
<div class="form-btn-prev w-auto d-inline-block"><i class="icon-arrow-left"></i> Return to list</div>
</div>
</div>
</div>
</div>
</form>
自定义.js
$('#btn-selectservice').click(function(event){
var carbrand = $('#carbrand').val();
var subbrand = $('#carrange').val();
var service1 = $('#customCheck1').val();
var service2 = $('#customCheck2').val();
var service3 = $('#customCheck3').val();
var service4 = $('#customCheck6').val();
var service5 = $('#customCheck7').val();
if(carbrand === "" && subbrand === "")
{
alert("Car brand empty");
$("#brand_error").show();
$("#sub_brand_error").show();
event.stopPropagation();
$("#btn-selectservice").attr("disabled", true);
$("#btn-selectservice").attr("disabled", true);
}
})
我在验证之上如果我在没有选择任何汽车品牌的情况下单击下一个按钮，则会显示警报，但它会导航到下一个选项卡。我尝试使用event.stopImmediatePropagation按钮单击，但这也不起作用。如何验证所有选项卡的“下一步”按钮？谁能帮帮我！提前致谢。
编辑 1
我已经更新了我的 custom.js 如下
$('#btn-selectservice').click(function(event){
alert("button clicked");
var carbrand = $('#carbrand').val();
var subbrand = $('#carrange').val();
var checkbox = $('input:checkbox').is(':checked');
if((carbrand == "" || carbrand == "All") && (subbrand == "" || subbrand == "All") && (checkbox == "false"))
{
event.stopPropagation();
$("#brand_error").show();
$("#sub_brand_error").show();
$("#service_error").show();
}
else if(carbrand == "" || carbrand == "All")
{
event.stopImmediatePropagation();
$("#brand_error").show();
}
else if(subbrand == "" || subbrand == "All")
{
event.stopImmediatePropagation();
$("#sub_brand_error").show();
}
else if(checkbox == "false")
{
event.stopImmediatePropagation();
$("#service_error").show();
}
else
{
$( "#btn-selectservice" ).trigger( "click" );
}
})
现在发生的情况是显示错误字段，并且当任何字段为空时禁用下一个导航，不幸的是，如果所有验证都正确并且当我单击下一个按钮时，它会进入无限循环。如果验证满意，我怎样才能使它工作。
解决方案
推荐阅读
- python - 根据语句过滤、检查和处理pandas df
- java - 使用引用变量创建数组并进行强制转换
- swiftui - .send() 和 .sink() 似乎不再适用于 Xcode 11 Beta 5 中的 PassthroughSubject
- python - 将字符串表转换为字典
- java - iText 7中每页剪切表
- javascript - 使用 ReactJS 构建时，Chrome 扩展内容脚本未注入 DOM
- c# - C# - 使用带有证书身份验证和带有 BinarySecurityToken 的数字签名的 SOAP Web 服务
- python - 如何从具有相同类的页面中的两个表中提取数据？
- javascript - 如何在 Json 响应后更新值
- r - 如何构建一个循环来导入许多数据帧并以相同的方式修改它们？