jQuery: form wizard plugin
The form wizard plugin is a plugin based on jQuery which can be used to simulate wizard like page flows for forms without having to navigate between different pages.
The plugin is very unobtrusive and gives the developer great freedom on how they set up the flow of the different steps in their wizards, as the plugin supports creating specific routes in the form depending on the user input.
On the right of this page, a sample form is available as a demo.
Create a form on your page and add some spans or divs with the class step around the elements that
should be considered a step in the wizard. The form below should create a 5-step wizard which branches at step 2 and submits the form on step 3 and 5.
The form also have validation for the bottom input fields in step 3 and 4 just show how easy it is to add validation. Note that all input elements except
the submit and reset buttons must be disabled (this need was introduced in version 0.9.4 for adding performance)
Note the text in red in the form
<form id="theForm" method="post" action="#">
<div class="step">
<h1>step 1 - falls through to step 2 on next</h1>
<input disabled="disabled" type="text" value="" /><br />
<input disabled="disabled" type="text" value="" /><br />
<input disabled="disabled" type="text" value="" /><br />
</div>
<div class="step">
<h1>step 2 - branch step</h1>
<input disabled="disabled" type="text" value="" /><br />
<input disabled="disabled" type="text" value="" /><br />
<input disabled="disabled" type="text" value="" /><br />
<select disabled="disabled" class="link" >
<option value="" >Choose the step to go to...</option>
<option value="step3" >Go to Step3</option>
<option value="step4" >Go to Step4</option>
</select><br />
</div>
<div id="step3" class="step">
<h1>step 3 - submit step</h1>
<input disabled="disabled" type="text" value="" /><br />
<input disabled="disabled" type="text" value="" class="required"/><br />
<input disabled="disabled" type="hidden" class="link" value="submit_step" />
</div>
<div id="step4" class="step">
<h1>step 4</h1>
<input disabled="disabled" type="text" value="" /><br />
<input disabled="disabled" type="text" name="email" class="required email" /><br />
</div>
<div id="step5" class="step">
<h1>step 5 - last step</h1>
<input disabled="disabled" type="text" value="" /><br />
<input disabled="disabled" type="text" value="" /><br />
</div>
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
</form>
add the following to the head part of your html.
<script type="text/javascript" src="./jquery-1.3.2.js"></script>
<script type="text/javascript" src="./jquery.history.js"></script>
<script type="text/javascript" src="./jquery.form.js"></script>
<script type="text/javascript" src="./jquery.validate.js"></script>
<script type="text/javascript" src="./jquery.form.wizard-1.0.1.js"></script>
<script type="text/javascript">
$(function(){
$("#theForm").formwizard({
//form wizard settings
historyEnabled : true,
formPluginEnabled: true,
validationEnabled : true},
{
//validation settings
},
{
// form plugin settings
}
);
});
</script>
...and your DONE!
To add localized validation on the fields please review the documentation for the validation plugin! See link in the text above.
Version 2.0.0-RC released. A lot of changes! Check out the new project page for more details and downloads
Version 1.0.1 released. Changes: Fixed so that the validation plugin handles all validation using form.valid(). Fixed so that it is possible set focus to a field in the form after the wizard is rendered.
Version 1.0.0 released. Changes: Fixed textarea validation
Version 0.9.9 released. Changes: Added a wizard setting for by-passing redefinition of $.fn.formwizard (redefinition is done to handle reset functionality). To skip the redefinition, set callable : false when initializing the wizard. Note: reset functionality will not be available when setting callable to false
Version 0.9.8 released. Changes: Reworked the server side validation. See change log for details.
Version 0.9.7 released. Changes: Added a way to reset the wizard by calling $("#theform").formwizard("reset");. Also, some information about the wizard is now returned to the afterNext and afterBack callbacks (current step, previous step, if the current step is a submit step and finally an Array containing the activated steps)
Version 0.9.6 released. Changes: Fix for enabling select validation.
Version 0.9.5 released. Changes: Fix for enabling optional validation.
Version 0.9.4 released. Changes: Performance fixes done for rendering and validation. Input fields need to be disabled in the HTML (no longer done by the plugin due to the performance hit that occurs when there are a lot of input elements in the form).
Version 0.9.3 released. Changes: Bug fix for enabling back button when history plugin is not used
Version 0.9.2 released. Changes: Bug fix for enabling radio buttons as links. Added initial functionality for doing server-side validation.
Version 0.9.1 released. Changes: callbacks afterNext and afterBack have been added to provide a means to do stuff after the next and back buttons have been clicked. Specify these in the settings for the wizard plugin
First version (0.9.0) of the form wizard plugin is out!
Note that I have only tested the page layout in firefox3 so the css might be a bit off in IE. Sorry about this if that is the case.