多选项卡验证不起作用

Question

当我单击提交按钮时，多选项卡验证不起作用。我有大约 12 个标签。如果我在任何选项卡中单击提交按钮，它就会简单地提交。其他选项卡未得到验证。

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

Answer 1

如果您正在使用 jquery.validation，那么您可能遇到了这样一个事实，即默认情况下，它只验证可见控件。

您之前可以使用类似

的方式更改此设置

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

Answer 2

默认情况下，jquery 验证不适用于隐藏字段（例如隐藏选项卡）。要启用此功能，请在就绪方法

之外添加此代码

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

Answer 3

var dataForm = $('#form');
dataForm.mage('validation', {"ignore": ""});

多选项卡验证不起作用

Multiple Tab Validation is not working

asp.net-mvc

asp.net-mvc-4

twitter-bootstrap-3