Form wizard


FormWizard: more on scripting.

In the last example we used the events associated to the page flip to enforce some simple business rules. Obviously you can use those functions to do presentation or to steer the path the user have to follow

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.

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.

Beware - Hic sunt leones

Maybe in this page there is something annoying to people not used to think to an animal being as a source of food or fabric, and we don't want to harm them.

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