jQuery验证不在Bootstrap 3选项卡表单上工作

我看过这个问题/答案,还有更多喜欢它,但我仍然无法通过切换选项卡或移动到带有错误的选项卡进行表单验证.

相关的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();

});

});

你可以在这里查看

我错过了什么？

有人可以帮帮我吗？我不能让它工作.

更新:

好吧所以我已经移动了一些代码并且玩了一下:

$("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或者if？