Подтвердить форму части аккордеона с jquery

Question

Моя форма представлена ​​как аккордеон. Я хочу проверить каждый раздел вместо общей формы на submit. Я не могу заставить это работать.

Немного моей форме (я оставил скрытые поля вне):

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

И мои JS для проверки:

jQuery(document).ready(function($) { 
var a = "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 is required", 
    }, 
    b: { 
     required: "Field is 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 
    }); 
    } 
} 
}); 
}); 

Я не могу понять, где я ошибся. Я читал каждый учебник, но не видел его. Может кто-нибудь мне помочь?

Answer 1

Получить эту работу с изменением JS для:

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 is 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); 
     } 
    } 
}); 
});