html - Highlights and active/redirect to bootstrap tab if error raised by jQuery validation plugin -
i have form 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 using jquery validation plugin - v1.13.0 validate form.
jquery code like:-
<script > $("#frmid").validate({ rules: { name: { required: true, minlength: 3 }, } }); </script >
i want highlight specific tab contain field(invalid data field) if error occurred jquery plugin , active tab also.
i highly appreciate if can help. in advance.
i have use jquery validate highlight , work 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 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 change done hightlight $(element) .closest('.form-group').removeclass('error'); // set error class control group } }); </script>
Comments
Post a Comment