如果 jQuery 验证插件引发错误，则突出显示和活动/重定向到引导选项卡答案

【问题标题】：Highlights and active/redirect to bootstrap tab if error raised by jQuery validation plugin如果 jQuery 验证插件引发错误，则突出显示和活动/重定向到引导选项卡
【发布时间】：2016-11-08 10:49:38
【问题描述】：

我有一个使用引导选项卡的带有多个选项卡的表单。

Html Tabs 结构如下：-

<div class="tabs-container">
<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab-1"> Tab 1</a></li>
    <li class=""><a data-toggle="tab" href="#tab-2">  Tab 2</a></li>
</ul>

<div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body">
                                    <fieldset class="form-horizontal">
                    <!--Form field Here-->
                    </fieldset>
                    </div>
                            </div>
                            <div id="tab-2" class="tab-pane ">
                                <div class="panel-body">
                                    <fieldset class="form-horizontal">
                    <!--Form field Here-->
                    </fieldset>
                    </div>
                            </div>
</div>
</div>

我正在使用 jQuery Validation Plugin - v1.13.0 来验证表单。

jquery 代码如下：-

<script >
$("#frmID").validate({
rules: {
name: {
required: true,
minlength: 3
},
}
});
</script >

如果 jquery 插件发生错误并激活该选项卡，我想突出显示包含该字段（无效数据字段）的特定选项卡。

如果我能得到一些帮助，我将不胜感激。提前致谢。

【问题讨论】：

到目前为止您尝试过什么？提供小提琴和Minimal, Complete, and Verifiable Examples 也很有用。
@secelite 我尝试过使用“highlight: function”。但没有得到解决方案。
我也尝试创建一个小提琴，但制表符在那里不起作用。因此，我没有创建它。
您应该提供到目前为止您尝试过的代码。 highlight 函数正是您所需要的。
@secelite 是的，我尝试过使用相同的高亮代码，现在它对我有用，我将在答案中分享正确的代码，请检查。

标签： jquery html twitter-bootstrap validation jquery-validation-engine

【解决方案1】：

我使用了 Jquery validate highlight 及其对我的工作。

<script>
$("#frmID").validate({
    rules: {
        name: {
        required: true,
        minlength: 3
        },
    },
    highlight: function (element) { // hightlight error inputs
        $(element)
        .closest('.form-group').addClass('error'); // set error class to the control group
        if($('#tab-1').find('div.error').length != 0){                                                
        $('#tab-1_a').css('color', 'red');
        }else{
         $('#tab-1_a').css('color', '#A7B1C2');
        }
        if($('#tab-2').find('div.error').length != 0){
        $('#tab-2_a').css('color', 'red');
        }else{
         $('#tab-2_a').css('color', '#A7B1C2');
        }
    },
    unhighlight: function (element) { // revert the change done by hightlight
        $(element)
        .closest('.form-group').removeClass('error'); // set error class to the control group
    }

});
</script>

【讨论】：