Reputation: 5180
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
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
Reputation: 3250
You can use custom rules, and set your form 'valid' for submit according selected tab e.g:
div 1
div 2
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