Menu
My HTML form has a number of divs that are the steps of a wizard. Upon clicking a "next" button I want to validate just the active div. I'm using the jQuery.Validate.js plugin.
Each div has an ID, so I want a way to say something like:
wizardForm.validate().element('#first-step :input')
but this only validates the first input, not all of them. How can I validate all inputs within a div?
820
jQuery(document). ready(function() { jQuery("#forms). validate({ rules: { firstname: 'required', lastname: 'required', u_email: { required: true, email: true,//add an email rule that will ensure the value entered is valid email id. maxlength: 255, }, } }); });
The jquery validate plugin requires a form element to function, so you should have your form fields (no matter how few) contained inside a form. You can tell the validation plugin not to operate on form submission, then manually validate the form when the correct submit button is clicked.
Validation in JQuery: Using JQuery, a form is validated on the client-side before it is submitted to the server, hence saves the time and reduce the load on the server. Form Validation means to validate or check whether all the values are filled correctly or not.
The plugin adds a validationPlugin function to jQuery. fn , so simply check whether it exists or not; if (typeof jQuery. fn.
Taking what jAndy suggested, I created this helper function:
jQuery.validator.prototype.subset = function(container) {
var ok = true;
var self = this;
$(container).find(':input').each(function() {
if (!self.element($(this))) ok = false;
});
return ok;
}
usage:
if (wizardForm.validate().subset('#first-step')) {
// go to next step
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With