Form to Wizard jQuery Plugin

Janko wrote a tutorial explaining how to create a plugin which can convert html form into wizard (using legends) and he called this plugin Form to Wizard. I liked the idea of this plugin and used it in one of my project. But he wrote a tutorial so he didn’t provided any option to customize this plugin. So I added options in this plugin to customize it to meet my needs in the project. I decided to share its source on my blog.

Demo Plugin Source

Above demo uses almost all of the new options explained below. Also I placed all the mandatory CSS in formToWizard.css file and rest of the styles used to decorate form are inlined in HTML page.

Original Plugin

Check the demo on Janko’s website so you get the idea what this plugin was about.

New Options

Show/Hide Progress

You can show or hide progress of wizard (shown on the top of wizard) using option showProgress. By default its value is true.

$( '#myform' ).formToWizard({
    showProgress: false
});

Above code will hide the progress of wizard as shown below.

Show/Hide Wizard Progress

Show/Hide Step Numbers

showStepNo option is used to show/hide Step No in the progress and its default value is true. When you hide the Step No, the wizard progress will become CSS based breadcrumbs. Of course you can change the look and feel in CSS.

$( '#myform' ).formToWizard({
    showStepNo: false
});

Hide Step No

Rename Next/Back Buttons

You can rename Next/Back buttons using nextBtnName and prevBtnName options. Default values are ‘Next >’ and ‘< Back’.

$( '#myform' ).formToWizard({
    prevBtnName: '<< Previous',
    nextBtnName: 'Forward >>'
});

Next/Back buttons renamed

Validation Callback

validateBeforeNext option is used to pass a validation function to formToWizard plugin so whenever Next button is clicked, this function is called to validate the current step. Here’s how to use it.

$( '#myform' ).formToWizard({
   validateBeforeNext: function() {
      //validationEngine is a jQuery validation plugin
      return $( '#myform' ).validationEngine( 'validate' );
   }
});

All you need to pass a function which contains an expression for validating the form and return the result of this expression from the function. Next button will only work if the expression is evaluated to true. In the above example I used Validation Engine plugin to validate the form and this is the documentation of the plugin. In following image, validationEngine is displaying error messages for the current step.

Step Validation

Navigate Wizard from External Elements

You can move to Next/Previous or to a particular step in wizard using external elements (like buttons or input box). These three operations can be performed using commands ‘GotoStep’, ‘NextStep’, ‘PreviousStep’. To use these commands you need to call the same plugin function formToWizard but with command name as parameter instead of options object.

var $myform = $( '#myform' );
 
$myform.formToWizard({
   validateBeforeNext: function() {
      //validationEngine is a jQuery validation plugin
      return $( 'myForm' ).validationEngine( 'validate' );
   } 
});
 
$myform.formToWizard( 'GotoStep', 2 ); //navigate to step 2 directly not matter what current step No is
 
$myform.formToWizard( 'NextStep' ); //navigate to next step from current step
 
$myform.formToWizard( 'PreviousStep' );//navigate to previous step from current step

Better take a look at demo to see how navigation of wizard works.


comments powered by Disqus