Form wizard


FormWizard: Add some scripting.

You can modify the FormWizard behaviour to a certain extent using its options, but a key feature is the ability to script the page flips.

You can leverage on this feature to provide inline validation or a flexible workflow, or just spice up the wizard presentation. I will explain a very basic approach to this scripting delaying a thoroguh approach in a yet to come example.

FormWizard flow: How it works?

When the user clicks to move on the next or previous page some events are fired:

First of all, if an onExit event it is registered with the current page, the function registered with the event is evaluated. If it return a false value then the flip stops and the page is not switched.

Depending on the non false value returned by the function evaluated in the first step, FormWizard prepare itself to show a new page. We can enter the new page (and leave the previous one) only if the onEnter function attached to the target page,if there is one, evaluates to true

In short, the pageflip happens only if both the function return a true value. It is on behalf of the function that negate the flip to show a notification to the user.

in this example we get lazy and let the plugin to inject the control area by itself with the createControlArea directive in the second parameter.

The code

The FormWizard constructor has three parameters. We will use the first and the third ones:

new FormWizard('contactForm', {"createControlArea": true}, { "summaryPage": { "onEnter": function(){ $('confirmEmail').innerHTML = $('emailField').value; $('confirmMsg').innerHTML = $('areamsg').value; return true; }}, "contactData": { "onExit": function(){ if ($('emailField').value) return true; alert("The email field is mandatory! Fill it to proceed"); return false; }}, "messagePage": { "onExit": function(){ var test = $('areamsg').value; if (test && test != "Leave your message here...") return true; alert("Please, leave a message before you leave this page."); return false; }} } ); });

In the form there are fieldsets with id contactData, messagePage and summaryPage. The respective functions will be called when leaving the fieldsets contactData, messagePage and just before entering the last fieldset (summaryPage)

Press this button to see it at work:

You should also feel free to peruse the css used to style the wizard.

The Form

Contact Data

Insert your email and let me send you a ton of spam. You can change idea later in the submission process. Sure, I swear.


This is an fieldset used to demonstrate that not all the fieldset have to be mentioned in the flow

Time to input a complicate message

Insert your message below


Your mail is and the message you filed is

You can go back and change the previously inputed datas or press the submit button to send your data to the nearest black hole.

Obviously, the widget contained in the several pages of the wizard can be scripted as usual as you will see to the forth example