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.