Oninit
and onpagechangestart event handlers
Form to Form Wizard script supports two event handlers that make it easy,
among other things, to perform validation on each form page as the user goes
from page to page. You can prevent the user from going to another page until the
errors are corrected. If all you need is to validate a form so certain fields
are filled out, you can simply use the built in
validate option to quickly and
easily do that. However, for anything more fancy, the oninit and
onpagechangestart event handlers is your men to turn to. Here’s a description of each event handler:
The oninit($, i, $fieldset) event handler
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:
- $: A shorthand reference to the main jQuery object for your
convenience.
- i: The page number of the currently shown form page, where 0=1st page, 1=2nd
page etc. If you do not have persistence of last page enabled, this value will
always be 0; otherwise, it will be the page number of the recalled and currently
shown page.
- $fieldset: A jquery object referencing the
<fieldset> that wraps
around all the form elements of the current page. You can reference the
first INPUT element of the current page for example using the syntax $fieldset.find(“input:eq(0)”)
The following simple example simply alerts the page number of the current
form page when the form wizard loads:
<script type="text/javascript">
var myform=new formtowizard({
formid: 'feedbackform',
persistsection: true,
revealfx: ['slide', 500],
oninit:function($, i, $fieldset){
alert("You are on page "+i+" of the form")
})
})
</script>
The onpagechangestart($, i, $fieldset) event handler
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. This is the primary
event handler you'll be using to perform custom validation on each form
page. The event is also passed three parameters:
- $: A shorthand reference to the main jQuery object for your
convenience.
- i: The page number of the currently shown form page, where 0=1st page, 1=2nd
page etc. If you do not have persistence of last page enabled, this value will
always be 0; otherwise, it will be the page number of the recalled and currently
shown page.
- $fieldset: A jquery object referencing the fieldset that wraps
around all the form elements of the current page. You can reference the
first INPUT element of the current page for example using the syntax
$fieldset.find(“input:eq(0)”)
See jQuery selectors for more info.
By returning false from this event handler, you disable the user's ability
to go on to the next page until a value of true is returned. The following
example checks each page's INPUT type="text" and TEXTAREA elements to ensure
they aren't blank before letting the user proceed on to the next page:
|
var myform=new formtowizard({
formid: 'feedbackform',
persistsection: true,
revealfx: ['slide', 500],
onpagechangestart:function($, i, $fieldset){
var validated=true
var $els=$fieldset.find('input[type="text"], textarea') //get
textbox and textarea elements
$els.each(function(){ //loop thru these elements
if ($(this).val()==""){ //if element is empty
alert("Please fill out the field "+$(this).attr('id'))
$(this).focus()
validated=false
return false //break out of each() loop
}
})
return validated //if this variable returns false, user is prevented from
going on to next form page
}
}) |
|
|
The $fieldset parameter as mentioned is a jQuery reference to
the <fieldset> element that wraps around all the form elements
on the current form page. Based on your knowledge of
jQuery selectors,
you can access any of the form elements on that page. In the above example,
the line:
var $els=$fieldset.find('input[type="text"], textarea')
references both textbox and textarea elements that may be on the visible
form page. The code that follows checks to see if any of these elements (if
present) are empty, and if so, empty the loop and sets validated
to false. This Boolean variable when returned from the event handler
determines whether the user is able to move on to another page or not. By
returning false inside this event handler, you prevent the user from going
on to another page (until the error is corrected).
If you're not comfortable working with jQuery selectors, you can always use
the DOM instead, by referring to $fieldset.get(0)
instead of $fieldset. The below accomplishes the same validation as the
above example, but using the DOM syntax instead:
|
var myform2=new formtowizard({
formid: 'feedbackform2',
persistsection: true,
revealfx: ['slide', 500],
onpagechangestart:function($, i, $fieldset){
var validated=true
var fieldset=$fieldset.get(0) //get fieldset element as a DOM
object
var allels=fieldset.getElementsByTagName("*") //get all elements
inside fieldset
for (var i=0; i<allels.length; i++){
if (allels[i].type=="text" || allels[i].tagName=="TEXTAREA"){
if (allels[i].value==""){
alert("Please fill out the field "+allels[i].getAttribute('id'))
allels[i].focus()
validated=false
break //break out of for loop
} //end inner if
} //end outer if
}
return validated
}
}) |
|
|
- Script Index Page
- Form Validation using the oninit() and
onpagechangestart() event handlers
|
Form effects 
