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}.")
});
