如果 jQuery 验证插件引发错误，则突出显示和 active/redirect 到 bootstrap 选项卡

Question

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

Html 标签结构如下：-

<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 验证插件 - v1.13.0 来验证表单。

jquery 代码如下：-

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

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

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

Answer 1

我已经使用 Jquery 验证突出显示 及其对我的工作。

<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>

如果 jQuery 验证插件引发错误，则突出显示和 active/redirect 到 bootstrap 选项卡

Highlights and active/redirect to bootstrap tab if error raised by jQuery validation plugin

html

validation

jquery

twitter-bootstrap

jquery-validation-engine