CODEWITHSUNDEEP
jqueryvalidationplugins
KillerFish
KillerFish

Reputation: 5180

How to use jquery validation plugin on DIV tag

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

Upvotes: 2

Views: 4837

Answers (2)

user562307
user562307

Reputation: 11

You can place a form temporarily and validate the div alone after you got success you can remove the form again.

Upvotes: 1

Vitalii Ivanov
Vitalii Ivanov

Reputation: 3250

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

Upvotes: 2

Related Questions