jQuery Validate 不适用于 Bootstrap 3 选项卡式表单

Question

我看过这个question/answer，还有更多类似的，但我仍然无法让我的表单验证切换标签或移动到出现错误的标签。

相关的jQuery：

$(document).ready(function () {

$("form[name=modify]").validate({
    ignore: [],
    rules: {
        first_name: {
            required: true,
        },
        surname: {
            required: true
        },
        id_number: {
            required: true
        },
        mobile_number: {
            number: true,
            minlength: 10,
        },
        home_number: {
            number: true,
            minlength: 10,
        },
        other_contact: {
            number: true,
            minlength: 10,
        },
        line1: {
            required: true,
        },
        city_town: {
            required: true,
        },
        postal_code: {
            required: true,
            minlength: 4,
        },
        curr_renumeration: {
            required: true,
            number: true,
        },
        expect_renumeration: {
            required: true,
            number: true
        },
        email: {
            email: true,
            required: true,
        },
        highlight: function (label) {
            $(label).closest('.control-group').addClass('has-error');
            console.log($(label).closest('.control-group').addClass('has-error'));
            if ($(".tab-content").find("div.tab-pane.active:has(div.has-error)").length == 0) {
                $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function (index, tab) {
                    var id = $(tab).attr("id");

                    $('a[href="#' + id + '"]').tab('show');
                });
                $('#myTab').on('shown', function (e) {
                    console.log(this);
                    e.target // activated tab
                    $($(e.target).attr('href')).find("div.has-error :input:first").focus();
                });
            }
        },
    }
});
$("[type=submit]").submit(function (e) {
    e.preventDefault();

});

});

您可以查看here

我错过了什么？

有人可以帮我吗？我无法让它工作。

更新：

好的，所以我移动了一些代码并玩了一下：

$("form[name=modify]").validate({
        highlight : function(label) {
            $(label).closest('.form-group').addClass('has-error');
            $(".tab-content").find("fieldset.tab-pane:has(has-error)").each(function(index, tab) {
                alert("error from if");
                if ($(".tab-content").find("field.tab-pane.active:has(has-error)").length == 0) {
                    alert("error from each");
                    var id = $(tab).attr("id");
                    console.log(id);
                    $('a[href="#' + id + '"]').tab('show');
                }

            });
        },
        invalidHandler : function(event, validator) {
            // 'this' refers to the form
            $('#myTab').on('shown', function(e) {
                console.log(this);
                e.target;// activated tab
                $($(e.target).attr('href')).find("fieldset.has-error :input:first").focus();
            });
            var errors = validator.numberOfInvalids();
            if (errors) {
                var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You missed ' + errors + ' fields. They have been highlighted';
                $("div.has-error span").html(message);
                $("div.has-error").show();
            } else {
                $("div.has-error").hide();
            }
        },
        ignore : [],
        rules : {
            first_name : {
                required : true,
            },
            surname : {
                required : true
            },
            id_number : {
                required : true
            },
            mobile_number : {
                number : true,
                minlength : 10,
            },
            home_number : {
                number : true,
                minlength : 10,
            },
            other_contact : {
                number : true,
                minlength : 10,
            },
            line1 : {
                required : true,
            },
            city_town : {
                required : true,
            },
            postal_code : {
                required : true,
                minlength : 4,
            },
            curr_renumeration : {
                required : true,
                number : true,
            },
            expect_renumeration : {
                required : true,
                number : true
            },
            email : {
                email : true,
                required : true,
            },

        }
    });

一切正常，除了停在这一行if ($(".tab-content").find("field.tab-pane.active:has(has-error)").length == 0) {

如果我用$(".tab-content").find("fieldset.tab-pane:has(has-error)").each(function(index, tab) { 交换它，它也会停止...

更新jsFiddle

为什么不进入 .each 或 thif ？

Answer 1

我认为您的问题可能是默认情况下 jquery 只会验证可见字段。所以你需要做的是告诉 jquery 不要忽略你的隐藏字段（其他选项卡）。这可以按如下方式完成。

$("#form1").validate({ ignore: "" });

默认情况下，忽略:hidden。请参阅此答案和此文档（选项 -> 忽略）。

Answer 2

$("form").on('submit', function () {
    var isValid = $(this).valid();
    if (this.hasChildNodes('.nav.nav-tabs')) {
        var validator = $(this).validate();
        $(this).find("input").each(function () {
            if (!validator.element(this)) {
                isValid = false;
                $('a[href=#' + $(this).closest('.tab-pane:not(.active)').attr('id') + ']').tab('show');
                return false;
            }
        });
    }
    if (isValid) {
        // do stuff
    }
});

Answer 3

所以...

我的问题已经解决了……

我不得不稍微调整一下answer。

我的解决方案是：

• 在我的$("form[name=modify]").validate({}) 中，我调用了一个名为highlight 的函数，

• 我没有使用$(".tab-content")，而是使用参数label来创建一个变量：

  var tab_content=$(label).parent().parent().parent().parent().parent().parent().parent();
  

• 也许不是最有效的方法，也不是最好的方法……但它确实有效……

• 我还从这一行中删除了:hidden：

  $(".tab-content").find("div.tab-pane:hidden:has(div.has-error)").each(function(index, tab)
  

这是完整的功能：

        $("form[name=modify]").validate({
        highlight : function(label) {
            $(label).closest('.form-group').addClass('has-error');
            var tab_content= $(label).parent().parent().parent().parent().parent().parent().parent();
            if ($(tab_content).find("fieldset.tab-pane.active:has(div.has-error)").length == 0) {                   
                 $(tab_content).find("fieldset.tab-pane:has(div.has-error)").each(function (index, tab) {
                    var id = $(tab).attr("id");
                $('a[href="#' + id + '"]').tab('show');
                 });
             }
          },
            ignore : [], // <-- this is important
            rules : {
                first_name : {
                    required : true,
                },
                surname : {
                    required : true
                },
                id_number : {
                    required : true
                },
                mobile_number : {
                    number : true,
                    minlength : 10,
                },
                home_number : {
                    number : true,
                    minlength : 10,
                },
                other_contact : {
                    number : true,
                    minlength : 10,
                },
                line1 : {
                    required : true,
                },
                city_town : {
                    required : true,
                },
                postal_code : {
                    required : true,
                    minlength : 4,
                },
                curr_renumeration : {
                    required : true,
                    number : true,
                },
                expect_renumeration : {
                    required : true,
                    number : true
                },
                email : {
                    email : true,
                    required : true,
                },

            }
        });

查看JSFIDDLE

• 注意：您不需要上面提到的答案中所述的额外功能来交换标签：

  // Don't need this 
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e){
      e.target // activated tab
  
      $($(e.target).attr('href')).find("div.has-error :input:first").focus();
  
      //e.relatedTarget // previous tab
  }); 
  

我不知道为什么，但你不需要它......无论如何我的工作没有它......

我希望这可以帮助某人。