JQuery Validate Tricks

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