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

【问题标题】：show error in each bootstrap tabs using jquery validation使用 jquery 验证在每个引导选项卡中显示错误
【发布时间】：2015-06-18 11:08:50
【问题描述】：

我使用这样的 jquery 验证插件在引导选项卡中验证我的表单：

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 验证插件工作并验证了所有选项卡，并在每个输入的底部显示错误。如果选项卡中出现错误，我需要显示警报或突出显示选项卡的标题（即：地址详细信息）。
如何在标题选项卡中显示此警报或突出显示错误？

演示HERE

【问题讨论】：

标签： javascript jquery html twitter-bootstrap validation

【解决方案1】：

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

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

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

【讨论】：