Question

I have a form with multiple steps like jquery tabs. My intention is to validate the input text fields within a single tab and only then will the user be able to go to next tab. In the last tab I want to submit the form with all the data from previous tabs.

How can I use jquery validation plugin on DIV tags so that I can have multiple div tags in single form and how can I validate input text on each div fields?

Thank You

Answer 1

You can use custom rules, and set your form ‘valid’ for submit according selected tab e.g:

div 1

• txtName
• txtEmail

div 2

• txtAddress
• txtOther
  …

Configuration will be following:

var tab1Valid = false;
var tabNValid = false;

jQuery.validator.addMethod('Tab1Validator', isFirstTabValid, '*');
jQuery.validator.addMethod('Tab2Validator', isSecondTabValid, '*');
...

 $('#tabsForm').validate({
            onkeyup: false,
            submitHandler: onSaveHandler,
            rules: {
                txtName: { Tab1Validator: '' },
                txtEmail: { Tab1Validator: '' },
                txtAddress: { Tab2Validator: '' },
...
            }
        });

isFirstTabValid: function(value, element, params) {
// validate values accordign 'element' parameter
// return corresponding true/false  
    },

isSecondTabValid: function(value, element, params) {
      if (tab1Valid === false)  {
return true; // we dont need validate other fields if first tab is not valid.
}

// else validate 
    },

Well, something like this. Change as you wish, main idea is here