Skip to content

Validation in Multi Step Form

bcardarella edited this page May 15, 2011 · 8 revisions

If you have a multi step form and want to enable client side validation on completion of each step, use the following code. Basically, on click of next button, perform validation on each of the visible form fields.

$("#NextButton").bind("click", function(e) {
  //If the form is valid then go to next else dont
  var valid = true;
  // this will cycle through all visible inputs and attempt to valdate all of them.
  // if validations fail 'valid' is set to false
  $('[data-validate]:input:visible').each(function() {
    var form = window[formId];
    if (!$(this).isValid(form.validators)) {
      valid = false
    }
  });
  if(valid){
    //code to go to next step
  }
  // if any of the inputs are invalid we want to disrupt the click event
  return valid;
});