在bootstrap 3选项卡中显示jQuery验证的警报亮点

时间:2015-01-23 15:21:15

标签: javascript jquery twitter-bootstrap jquery-validate

我使用jquery validation plugin在引导标签中验证我的表单,如下所示:

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验证插件工作并验证所有选项卡并显示每个输入的错误底部。我需要显示提醒或突出显示标签的标题(即:<a data-toggle="tab" href="#form3">Address Details</a>),如果在标签中是错误的。

如何在标题标签中显示此提醒或突出显示错误

DEMO FIDDLE

0 个答案:

没有答案