validate accordion form section with jquery -

my form set accordion. want validate each section instead of total form on submit. can't work.

a bit of form (i left hidden fields out):

<form id="test"> <div id="accordion"> <h3 class="frm_pos_top"><a href="#">header</a></h3> <div> <div id="frm_field_179_container" class="frm_form_field form-field frm_required_field form-group frm_top_container frm_first frm_half"> <label for="field_lz5ptt" class="frm_primary_label control-label">question1 <span class="frm_required">*</span> </label> <select name="item_meta[179]" id="field_lz5ptt"  data-frmval="(blanco)" class="form-control"  > <option value="(blanco)"  selected="selected"> </option>         <option value="10" >1</option>         <option value="11" >2</option>         <option value="12" >3</option>         <option value="13" >4</option>         <option value="20" >5</option> </select> </div> <div id="frm_field_86_container" class="frm_form_field form-field frm_required_field form-group frm_top_container frm_half"> <label for="field_n9ta9n" class="frm_primary_label control-label">question 2? <span class="frm_required">*</span> </label> <div class="input-group"><span class="input-group-addon">€</span> <input type="tel" id="field_n9ta9n" name="item_meta[86]" value=""  maxlength="6" class="add_thou form-control"  /> </div> </div> <div class="back_next" style="float:right;"><input type="button" value="volgende" id="button1" class="x-btn x-btn-flat x-btn-rounded x-btn-small volgende-button"/></div> 

and js validate:

jquery(document).ready(function($) { var = "item_meta[179]"; var b = "item_meta[86]"; var c = $("input[name='item_meta[83]']:checked").val(); $("#button1").on('click', function (){ var form = $("#test"); form.validate({ errorelement: 'span', errorclass: 'help-block', highlight: function(element, errorclass, validclass) { $(element).closest('.form-group').addclass ("has-error"); }, unhighlight: function(element, errorclass, validclass) { $(element).closest('.form-group').removeclass ("has-error"); }, rules: {     a: {         required: true,     },     b: {         required: true,         minlength: 4,     }, }, massages: {     a: {         required: "field required",     },     b: {         required: "field required"     }, } });  if (form.valid() == true){     if(c == '2') {     $("#ui-id-1").addclass("ui-state-disabled");     $("#ui-id-3").removeclass("ui-state-disabled");     $("#accordion").accordion({     active: 1     });     } else {     $("#ui-id-1").addclass("ui-state-disabled");     $("#ui-id-5").removeclass("ui-state-disabled");     $("#accordion").accordion({     active: 2     });     } } }); }); 

i can't figure out go wrong. have read every tutorial, not seeing it. can me out?

get working changing js to:

jquery(document).ready(function($) { $("#button1").on('click', function (){ var c = $("input[name='item_meta[83]']:checked").val(); var form = $("#test"); if (form.valid() == true){ if(c == '2') {     $("#ui-id-1").addclass("ui-state-disabled gereed");     $("#ui-id-3").removeclass("ui-state-disabled");     $("#accordion").accordion({     active: 1     }); } else {     $("#ui-id-1").addclass("ui-state-disabled gereed");     $("#ui-id-5").removeclass("ui-state-disabled");     $("#accordion").accordion({     active: 2     }); } } }); });      jquery(document).ready(function($) { var form = $("#test"); form.validate({     rules: {         "item_meta[179]": {             required: true,             min: 1         },         "item_meta[86]": {             required: true,             minlength: 4         } }, messages: { "item_meta[179]": "required", "item_meta[86]": {         required: "required",         minlength: "minlength 1.000"         } },     highlight: function(element) {         $(element).closest('.form-group').addclass('has-error');     },     unhighlight: function(element) {         $(element).closest('.form-group').removeclass('has-error');     },     errorelement: 'span',     errorclass: 'help-block',     errorplacement: function(error, element) {         if(element.parent('.input-group').length) {             error.insertafter(element.parent());         } else {             error.insertafter(element);         }     } }); });