We are putting together few tricks that we routinely use with JQuery Validate. Please note that all the code snippets assumes that the form id is ‘my_form’.
Enable validation on submission:
Call the code snippet below in document.ready.
$("#my_form").validate();
Confirm password validation:
Refer detailed blog ‘JQuery Confirm Password Validation‘ on this topic.
Add STAR to all the required fields:
- You want to display a STAR next to all the fields that are required. Instead of typing in STAR use this code and add it smartly.
- You can also add STAR or something else, by just changing at one place.
- You can also add a class to all the labels indicating the required fields and make them look red using CSS.
Name the text and labels like: <label for="email">E-mail:</label> <input type="text" name="email" id="email" class="textfield required email" /> Then add following code: $(document).ready(function(){ $('.required').each(function(){ id = $(this).attr('id'); $('label[for='+id+']').after('<span>*</span>'); $('label[for='+id+']').addClass('requiredfield-label'); }); });
Cancel form validation on the particular event:
It would disable validations on click on an element with cancel_validation id
$('#cancel_validation').click(function(){ $("#my_form").validate().cancelSubmit = true; });
Do NOT apply form validation on a specific class:
It comes handy especially when you want to disable the validation at run time. This code would suspect validations on all the elements that have ‘ignoreValidation’ class.
$("#my_fomr").validate({ ignore: '.ignoreValidation' });
Customize the placement of the error messages:
In this code, all the error messages will appear inside the element, whose id is error_placeholder.
$("#my_fomr").validate({ errorPlacement: function(error, element) { $("#error_placeholder").append(error); } });
Customized password validation:
Password validation (Minimum 6 character, with at least 1 alphabet and 1 digit)
$.validator.addMethod("my_password_validation", function(value, element) { return this.optional(element) || /^\w*(?=\w*\d)(?=\w*[a-zA-Z])\w*$/.test(value); }, "Password should contain atleast 1 alphabet and 1 digit.");
Now give the class = “my_password_validation” to the password field and set minlength = 6
Override validation messages:
You can override each and every validation message in following way.
jQuery.extend(jQuery.validator.messages, { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date (ISO).", number: "Please enter a valid number.", digits: "Please enter only digits.", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", accept: "Please enter a value with a valid extension.", maxlength: jQuery.validator.format("Please enter no more than {0} characters."), minlength: jQuery.validator.format("Please enter at least {0} characters."), rangelength: jQuery.validator.format("Please enter a value between {0} and {1} characters long."), range: jQuery.validator.format("Please enter a value between {0} and {1}."), max: jQuery.validator.format("Please enter a value less than or equal to {0}."), min: jQuery.validator.format("Please enter a value greater than or equal to {0}.") });