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.
Features:

* Divides a single form into different steps to simulate a flow of steps rather than one big form.
* Supports different routes to be taken in the form
* Submits only the input fields in steps that are visited in the form
* Supports multiple “submit”-steps
* Supports both back and forward navigation
* Supports the usage of browser back- and forward-buttons through integration with the jQuery.history plugin
* Supports client-side validation through integration with the jQuery validation plugin
* Supports posting the form using AJAX through integration with the jQuery.form plugin
* Integrated plugins are fully configurable, providing e.g. possibility for localization and extra validation rules

On the right of this page, a sample form is available as a demo.
How to get started using the plugin
Step 1:

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

* step: defines that this div should considered a step in the wizard
* link: this class defines that the select is a link to a new page (in this case it can branch off to two places)
* step3 (#1): the value step3 is a “link” to the step with id=”step3″, this defines that the wizard should show that step
* step3 (#2): this is the id of the step which (#1) points to
* the hidden input: it has a link class and therefore acts as a link
* the last marked input: it has the classes required and email, which is used by the validate plugin to define that it should validate to an email.

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

Step 2:

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

Demo: http://home.aland.net/sundman/
Download: http://home.aland.net/sundman/jquery.formwizard-0.9.9.zip
Source: http://home.aland.net/sundman/

Related Listings:

1. jVal – jQuery Form Field Validation Plugin jVal is a jQuery form field validation plugin that provides...
2. jQuery inline form validation Engine When it comes to form validation, it’s hard to have...
3. Form Validation with JQuery A single line of jQuery to select the form and...
4. Simple and Clean Form Validation Script The complete example code (form and script) for Form Validation...
5. Flash News Scroller Wizard Flash News Scroller Wizard is a tool that allows you...

Do you like this post?

Email: