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

I have a form with multiple tabs using bootstrap tabs.

Html Tabs structure like:-

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

I am using jQuery Validation Plugin - v1.13.0 to validate the form.

jquery Code like:-

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

I want to highlight the specific tab which contain that field(invalid data field) if the error occurred by jquery plugin and active that tab also.

I will highly appreciate if i can get some help. Thanks in advance.

I have use the Jquery validate highlight and its work for me.

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