jQuery Form to Form Wizard (v1.1)
Oct 21st, 10': Script updated to v1.1, which adds basic form validation functionality, triggered each time the user goes from one page to the next, or tries to submit the form.
Description: This powerful jQuery script
turns a FORM into a multi-step FORM wizard! Simply group logical
elements within your FORM by surrounding them with the FIELDSET
element, and the script does the rest in creating a new page for
each group, plus the appropriate "Steps" text and pagination links above
and below the form. It helps make filling out long forms more intuitive
and less daunting. And when it comes to form validation, fear not, a
built in form validation feature plus
two event handlers, oninit
and onpagechangestart
of the script make it
possible to perform form validation on each form page easily before
allowing the user to move on to the next page.
The only requirement to using this script on a form is that you have access to the FORM's HTML markup in order to inject a FIELDSET element in the desired locations.
Demo #1:
Demo #2:
Above form makes use of the built in form validation feature (in v1.1) to specify that certain form fields must be filled out before he/she can go on to the next page or submit the form.
Step 1: Add the below script to the <HEAD> section of your page:
The above references the following two external files, which you should download (right click, and select "Save As")
Step 2: Then, insert the below HTML code onto your page, which contains the HTML markup of a single form with fieldset elements grouping logical form elements together:
And that's a wrap for installation, but read on to get all the important details on customizing the script.
Preparing your form to be transformed into a form wizard
The way to turn your form into a form wizard is to edit the
form's HTML markup to wrap each "page" of form
elements manually with a <FIELDSET class="sectionwrap">
element. The script
creates a new page out of each of these FIELDSET elements automatically. The
following is an arbitrary form, with the changes shown in red that turn the form
into a form wizard:
<form id="feedbackform">
<fieldset class="sectionwrap">
<legend>Basic Information</legend>
Name: <input type="text" /><br />
Age: <input type="text" /><br />
sex: <input type="radio" name="sex" value="male" /> Male <input type="radio"
name="sex" value="female" /> Female
</fieldset>
<fieldset class="sectionwrap">
<legend>Shipping Address</legend>
Country: <input type="text" /><br />
State/Province: <input type="text" /><br />
Address: <input type="text" /><br />
</fieldset>
<fieldset class="sectionwrap">
<legend>Additional Comments</legend>
Feedback: <textarea></textarea>
</fieldset>
</form>
The changes you should make to the form are:
-
Make sure the <form> element carries an ID or Name attribute (either will do) to identify it using.
-
Group each logical "page" of form elements by surrounding them with a
<fieldset class="sectionwrap">
tag. -
Define a
<legend>
element inside<fieldset>
to act as the title of the page in question, to be used as part of the auto generated "Steps" text shown at the top of the form. -
Call function
new formtowizard()
on this form to initialize it.
formtowizard()
initialization function
You need to call the
formtowizard()
function in the HEAD section of your page to
initialize the script on the form in question. Its syntax is:
var uniquevar=new formtowizard(options)
where "uniquevar
" should be an arbitrary but unique variable
name assigned to this instance of form wizard, and options is an JavaScript
object containing the settings for it. An example would be:
<script type="text/javascript">
var myform=new formtowizard({
formid: 'feedbackform',
persistsection: true,
revealfx: ['slide', 500] //<--no comma after last setting
})
</script>
The following lists the possible setting values:
option | Description |
formid Required |
The ID or NAME of the form you wish to
turn into a form wizard. Either of these attribute values will work, for
example: <form id="feedbackform"> or: <form name="feedbackform"> |
persistsection defaults to false |
Boolean that sets whether the script should
persist the last form "page" the user is on within a browser session,
and recall it upon the user's return. Defaults to false. For example:
var myform=new formtowizard({ |
revealfx defaults to ["slide", 500] |
Sets the effect used to bring each page into view. The
syntax is:
For example:
var myform=new formtowizard({ This sets the reveal effect to "fade" and for 1 second (1000 milliseconds) each time. |
validate
v1.1 featuredefaults to null |
An optional array of the IDs or names of the form fields within the form
that you wish the script to automatically validate. The script will check to
see if these fields are filled out before allowing the user to proceed to
the next form page or submit the form. For example:
var myform=new formtowizard({ More information below on how to use the validate array here. |
oninit:function(){} defaults to empty function |
This event handler is fired once when the script has finished initializing a form and transformed it into a form wizard. This usually happens before the page itself has finished loading. The event is passed three parameters:
|
onpagechangestart:function(){} defaults to empty function |
This event handler is fired each time the user is about to go from one form page to another, such as when the user has filled out the first page and clicks "next”" to proceed to the 2nd. The event is also passed three parameters:
|
Using Form Wizard's built-in form validation feature
When it comes to form validation, most of the time, you just want to ensure
that certain fields are filled out. This script rolls into it a simple form
validation feature that does that and with ease. Simply ensure all of the form
fields you wish to validate carry either an id
or name
attribute
to help identify them, for example:
<form id="staff_feedbackform">
<fieldset class="sectionwrap">
<legend>Basic Information</legend>
Name:<br /> <input id="staff_username" type="text" size="35" /><br />
Age:<br /> <input id="staff_age" type="text" size="6" /><br />
Sex: <input type="radio" name="staff_sex" value="male" /> Male <input
type="radio" name="staff_sex" value="female" /> Female
</fieldset>
<fieldset class="sectionwrap">
<legend>Shipping Address</legend>
Country:<br /> <input id="staff_country" type="text" size="35" /><br />
State/Province:<br /> <input id="staff_state" type="text" size="35" /><br
/>
Address #1:<br /> <input id="staff_addr1" type="text" size="35" /><br />
Address #2:<br /> <input id="staff_addr2" type="text" size="35" /><br />
</fieldset>
<fieldset class="sectionwrap">
<legend>Comments</legend>
Any additional instructions:<br /> <textarea id="staff_feedback"
style="width:350px;height:150px"></textarea><br />
<input type="submit" />
</fieldset>
</form>
Then inside the intialization code for the form, define the
validate
option
with the ids/names of the form fields you wish the script to check for:
<script type="text/javascript">
var myform3=new formtowizard({
formid: 'staff_feedbackform',
validate: ['staff_username', 'staff_sex', 'staff_addr1'],
revealfx: ['slide', 500] //<--no comma after last setting
})
</script>
The result is that the form fields "username", "sex", and "addr1" will now be checked to ensure they are not empty before the user can move on to the next page or actually submit the form:
The built in form validation works instantly and painlessly. However, by
default it only checks if the fields in question contain any data. For more
refined validation that check form fields for certain types of data, you need to
turn to the oninit()
and onpagechangestart()
event
handlers for the task. That's explained on the
next page.