jQuery検証プラグインでエラーが発生した場合のハイライトとアクティブ/リダイレクトブートストラップタブ

Question

ブートストラップタブを使用する複数のタブを持つフォームがあります。

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>