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:

  1. $: A shorthand reference to the main jQuery object for your convenience.
  2. 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.
  3. $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:

  1. $: A shorthand reference to the main jQuery object for your convenience.
  2. 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.
  3. $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:

Biography Name:

Age:

Sex: Male Female
Billing Address Country:

State/Province:

Address #1:

Address #2:

Past Experiences Please enter any past experiences:

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:

Biography Name:

Age:

Sex: Male Female
Billing Address Country:

State/Province:

Address #1:

Address #2:

Past Experiences Please enter any past experiences:

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
 }

})

Table Of Contents

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post