Need help regarding jquery form to formwizard script

[mona87]

1) Script Title: jquery Form to formwizard

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...suppliment.htm

3) Describe problem: I want to change the alertbox method of validation provided in the script and customize it to some stylish validation method. How do i do this?

[ddadmin]

It really depends on how you wish to go about the validation. The general steps are to first disable the automatic validation feature, by removing the validate option from your initialization code, then use the onpagechangestart() event handler to code your own validation behavior. Using the example on the supplementary page, the following example checks each page's INPUT type="text" and TEXTAREA elements within the form wizard's form 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
 }
})

As far as substituting the above with something more comprehensive, again, it really depends on the validation script you have lined up for this, and integrating it through the onpagechangestart() event handler.

[Yaresh]

It really depends on how you wish to go about the validation. The general steps are to first disable the automatic validation feature, by removing the validate option from your initialization code, then use the onpagechangestart() event handler to code your own validation behavior. Using the example on the supplementary page, the following example checks each page's INPUT type="text" and TEXTAREA elements within the form wizard's form 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
 }
})

As far as substituting the above with something more comprehensive, again, it really depends on the validation script you have lined up for this, and integrating it through the onpagechangestart() event handler.

OK here is what I have done:
add a div to each section, give div id 0,1 ect
Then...

var myform=new formtowizard({
 formid: 'genform',
 persistsection: false,
 revealfx: ['fade', 3000], //<--no comma after last setting 
 
 onpagechangestart:function($, i, $fieldset){
  var validated=true
  var $els=$fieldset.find('input[type="text"], textarea, select') //get textbox and textarea elements
  $els.each(function(){ //loop thru these elements
   if ($(this).val()==""){ //if element is empty
// choose err div on right page ( i)
    var errdiv = "#"+i
    //get the label text (label must be before field in html)
    var errmsg="Please check the " +$(this).prev("label").text()+" field"; 
    $(errdiv).html(errmsg)

    $(this).focus()
    validated=false
    return false //break out of each() loop
   }
  })

Works for me.
Yaresh