[jQuery] [validate] Multi-step form, how to validate only the current step?
I am trying to get a form with similar functionality to the demo shown
on http://www.mredesign.com/demos/jQuery-accordion-w-validation/#thedemo
but I'm having a problem that I cannot figure out. When attempting to
navigate from the first step to the second via the "Next" button the
validator.form() method validates the entire form rather than the
current step. What I don't understand is that the exact same code
works on the MreDesign.com demo. Here's what I'm doing:
//javascript
$(document).ready(function(){
// accordion functions
var accordion = $("#stepForm").accordion({autoheight: false});
var current = 0;
$.validator.addMethod("pageRequired", function(value, element) {
var $element = $(element)
function match(index) {
return current == index && $(element).parents("#sf" + (index +
1)).length;
}
if (match(0) || match(1) || match(2)) {
return !this.optional(element);
}
return "dependency-mismatch";
}, $.validator.messages.required)
var v = $("#proposalForm").validate({
errorClass: "error",
errorPlacement: function(error, element) {
element.parent('.input').prepend(error);
element.parent('.input').addClass('error');
},
errorElement: "h5",
onkeyup: false,
onblur: false,
submitHandler: function() {
alert("Submitted, thanks!");
},
debug: true
});
// back buttons do not need to run validation
$("#sf2 .prevbutton").click(function(){
accordion.activate(0);
current = 0;
});
$("#sf3 .prevbutton").click(function(){
accordion.activate(1);
current = 1;
});
// these buttons all run the validation, overridden by specific
targets above
$(".open2").click(function() {
if (v.form()) {
accordion.activate(2);
current = 2;
}
});
$(".open1").click(function() {
if (v.form()) {
accordion.activate(1);
current = 1;
}
});
$(".open0").click(function() {
if (v.form()) {
accordion.activate(0);
current = 0;
}
});
});
//markup
<form id="proposalForm" action="" method="post" enctype="multipart/
form-data">
<ul id="stepForm">
<li>
<div class="ui-accordion-left"></div>
<a href='#' class="ui-accordion-link">
<div class="ui-accordion-right"></div>
</a>
<fieldset class="proposal">
<legend> Step 1 of 3 </legend>
<h2>Tell us which department you are member of</h2>
<div class="input">
<label for="dept">TAMU Department</label>
<select name="department" id="dept" class="input required">
<option value="">- Choose -</option>
<option value="23" selected="selected">Research & Graduate
Studies</option>
</select>
</div>
<div class="buttonWrapper">
<input id="sf1n" name="formNext1" type="button" class="open1
nextbutton" value="Continue" alt="Continue" title="Continue" />
</div>
</fieldset>
</li>
<li>
<div class="ui-accordion-left"></div>
<a href='#' class="ui-accordion-link">
<div class="ui-accordion-right"></div>
</a>
<fieldset class="proposal">
<legend> Step 2 of 3 </legend>
<h2>Check the boxes that are TRUE</h2>
<div class="input">
<input type="checkbox" name="sigdean" id="sigdean"
class="required" />
<label class="checkbox" for="sigdean">I received approval via
signature of my Dean</label>
</div>
<div class="input error">
<h5>Problem!</h5>
<input type="checkbox" name="sigdepthead" id="sigdepthead"
class="required" />
<label class="checkbox" for="sigdepthead">I received approval
via signature of my Department Head</label>
</div>
<div class="input">
<input type="checkbox" name="sigpi" id="sigpi" class="required" /