Clever Geek Handbook

Checking multiple tables doesn't work

When I click the submit button, multiple tabs validation doesn't work. I have about 12 tabs. If I click the submit button on any tab, it just gets sent. The rest of the tabs are not checked.

 $("#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>
Run codeHide result


+3


source to share


2 answers


If you are using jquery.validation you are probably running into the fact that it only validates visible controls by default.

you can change this earlier using something like



$(document).ready(function(){
   $("form").validate().settings.ignore = "";
}
+6


source


By default jquery validation doesn't work for hidden fields (like hidden tab). To enable this add this code from the prepared method



$.validator.setDefaults({
            ignore: []
   });
0


source






More articles:


All Articles