使用jQuery验证在每个引导选项卡中显示错误

Question

我使用jquery验证插件在bootstrap选项卡中验证我的表单，如下所示：

JS：

$(document).ready(function () {

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

            }

        },

        debug: true,
        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,
            },

        }
    });
    $("[type=submit]").submit(function (e) {
        e.preventDefault();

    });

});

实际上，jquery验证插件可以工作并验证所有选项卡，并显示每个输入的错误底部。 如果选项卡中有错误，我需要显示警报或突出显示选项卡标题（即：地址详细信息）。
如何在标题选项卡中显示此警报或突出显示错误？

此处演示

Answer 1

您应该将invalidHandler添加为Validate方法的参数，如下所示：

invalidHandler: function(form, validator) {
    var formId = validator.errorList[0].element.closest('fieldset').id;
    var tab = $('[href="#' + formId + '"]');
    $(tab).css('color','red');
}

或您想要的任何其他错误效果。