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" /
>
<label class="checkbox"
for="sigpi">I have signed the proposal
indicating my own approval</label>
</div>
<div class="buttonWrapper">
<p class="open0
prevbutton">Back</p>
<input name="formNext2"
type="button" class="open2 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 3 of 3 </legend>
<h2>Select the document(s) that apply
to your proposal</h2>
<input type="file" name="proposal"
disabled="disabled" />
<div class="buttonWrapper">
<p class="open1
prevbutton">Back</p>
<input type="submit"
id="submit" value="Submit"
class="submitbutton" alt="Submit" title="Submit" />
</div>
</fieldset>
</li>
</ul>
</form>
