使用Bootstrap选项卡进行jQuery验证

时间:2016-04-25 05:50:24

标签: twitter-bootstrap-3 jquery-validation-engine bootstrap-tabs

我有一个包含多个Bootstrap选项卡的表单,其中有多个输入和选择字段,有些是必需的,有些则不是。

我正在使用jQuery Validation插件来验证表单。以下是使用bootstrap css突出显示并取消突出显示的错误:

    highlight: function(element) {
        $(element).closest('.input-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.input-group').removeClass('has-error');
    },

我真正需要的是如果任何标签没有经过验证的字段,我也希望标签突出显示。

我使用下面的代码,但有趣的是代码有时会起作用并用红色突出显示选项卡,有时它不起作用。

if($(".tab-content").find("div.tab-pane:has(div.has-error)").length != 0){
    $(".tab-content").find("div.tab-pane:has(div.has-error)").each(function(index, tab){
        var id = $(tab).attr("id");

        $('a[href="#' + id + '"]').tab('show').addClass('bg-danger');
    });
} else {
    $(".nav-tabs li a").each(function(){
        if($(this).hasClass('bg-danger')){
            $(this).removeClass('bg-danger');
        }
    });
}

我做错了什么?如果有任何必填字段有错误,如何突出显示标签?

0 个答案:

没有答案