When I click the submit button the multiple tab validation is not working. I have around 12 tabs. If I click Submit button within any tab it simply submitted. The other tabs are not getting validated.
$("#btn-login").click(function () {
var IsValid = true;
// Validate Each Bootstrap tab
$(".tab-content").find("div.tab-pane").each(function (index, tab) {
var id = $(tab).attr("id");
alert(id);
//$('a[href="#' + id + '"]').click(function (e) {
// e.preventDefault();
// $(this).tab('show');
//});
$('a[href="#' + id + '"]').tab('show');
//$('.nav-tabs a[href="#' + id + '"]').tab('show');
//alert($('a[href="#' + id + '"]').attr("href") + " 2345");
alert("succ11");
var IsTabValid = $("#" + id).validate();
alert("succ12");
if (IsTabValid.valid()) {
alert(id + " success");
IsValid = false;
}
});
});
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style=" padding-left:0px; padding-right:0px;">
<div class="tabs-left" style="padding-top: 0px; margin-top: 0px;">
<ul class="nav nav-tabs" id="tabs">
<li id="hm" class="active"><a href="#status" data-toggle="tab" data-target="#status"><span class="icon-time" style="color: white; font-size: 15px"></span></a></li>
<li id="edu"><a href="#passport" data-toggle="tab" data-target="#passport"><span class="icon-globe" style="color: white; font-size: 15px"></span></a></li>
<li id="pro"><a href="#movement" data-toggle="tab" data-target="#movement"><span class="icon-move" style="color: white; font-size: 15px"></span></a></li>
...
...
...
...
</div>
</div>
<div class="modal-footer" style="padding-bottom: 0px; margin-top:10px;">
<input type="submit" id="btn-login" class="btn btn-success" value="Submit" />
<button type="button" class="btn btn-danger modal-close-btn" data-dismiss="modal">Cancel</button>
</div>
If you are using jquery.validation, then you are probably hitting the fact that by default, it only validates visible controls.
you can change this before by using something like
$(document).ready(function(){
$("form").validate().settings.ignore = "";
}
By default, jquery validation is not working for hidden fields(like hidden tab also). To enable this add this code out of the ready method
$.validator.setDefaults({
ignore: []
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With