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.