This is not the full source code, just the interesting bits for the wizard.
JavaScript:
var isFormValid = function (evt, $link, $current, $target) {
// checkbox in step 2 needs to be checked
if ($current.attr("id") === "step2" && $target.attr("id") === "step3") {
var checkbox = $current.find("input[type='checkbox']");
if (checkbox.size() === 0 || checkbox.filter(":checked").size() > 0) {
alert("OK, you can proceed.");
return true;
}
alert("You really need to check the checkbox to advance.");
return false;
}
// checkbox in step 3 needs to be checked, if not, redirect to step 1
if ($current.attr("id") === "step3" && $target.attr("id") === "step4") {
var checkbox = $current.find("input[type='checkbox']");
if (checkbox.size() === 0 || checkbox.filter(":checked").size() > 0) {
alert("OK, you can proceed.");
return true;
}
alert("You are being redirected to step one.");
// use the to method to change the active DIV
$("#wizard-demo-3").wizard("to", $("#step1"));
return false;
}
};
$("#wizard-demo-3").wizard({
onBeforeClickLink: isFormValid
});
HTML:
<form>
<div class='ui-corner-all ui-widget-content' id='wizard-demo-3'>
<div id='step1' title='Step one'>
<p>
This demo is about the <tt>onBeforeClickLink</tt> event and the <tt>to</tt> method. On the next page you will find a checkbox.
</p>
<a class='wizard wizard-button' href='#step2'>→ step two</a>
</div>
<div id='step2' title='Step two' style='display:none'>
<p>
<input type='checkbox' />You have to check this one!
</p>
<a class='wizard wizard-button' href='#step3'>→ step three</a>
</div>
<div id='step3' title='Step three' style='display:none'>
<p>
<input type='checkbox' />You have to check this one as well! If not, you'll be redirected to step one.
</p>
<a class='wizard wizard-button' href='#step4'>→ step four</a>
</div>
<div id='step4' title='Step four' style='display:none'>
<p>
I guess you got the basic idea.
</p>
</div>
</div>
</form>