Custom US Phone Validator with jQuery Validate Plugin

Just in case you haven’t tried this yet, it is fairly easy to create custom validator method for jQuery Validate plugin. In their example is the US phone validator and here is how it was implemented.

Common setup

For common jQuery validate setup, you put classes and special attributes on the field to validate like below.

<form id="sample-form" action="submit.php" method="post">
Name: <input type="text" name="name" id="name" minlength="2" maxlength="30" class="required" /><br />

<!-- other fiels here -->

<input type="submit" name="submit" id="submit" value="Submit" />
</form>

On the form above, it wants the validator to check if name is between 2 to 30 characters in length to be valid.

Then we usually call some JavaScript code to initialize our validator like below:

$("#sample-form").validate();

In our example above, everything should work well when validating the name for example. Now we are adding a custom validator called phoneUS to validate US phone telephone numbers.

Adding custom validator

To add our custom validator, we write something like below (before any validate initialization):

jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ""); 
    return this.optional(element) || phone_number.length > 9 &&
        phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

The code above should be fairly easy to understand. It adds a new validator method called phoneUS where it validates phone numbers using regex patterns. Accepted format is 1-222-222-2222.

Next thing to do is add the phoneUS class to run this new method against this specific field.

Phone number: <input type="text" name="tel" id="tel" class="required phoneUS" />

Wrapping up

Our final code would look like below:

<form id="sample-form" action="submit.php" method="post">
Name: <input type="text" name="name" id="name" minlength="2" maxlength="30" class="required" /><br />
Phone number: <input type="text" name="tel" id="tel" class="required phoneUS" /><br />
<!-- other fiels here -->

<input type="submit" name="submit" id="submit" value="Submit" />
</form>

And our js code will be:

jQuery.validator.addMethod("phoneUS", function(phone_number, element) {
    phone_number = phone_number.replace(/\s+/g, ""); 
    return this.optional(element) || phone_number.length > 9 &&
        phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);
}, "Please specify a valid phone number");

$("#sample-form").validate();

Enjoy and share.

This entry was posted in Uncategorized. Bookmark the permalink.

2 Responses to Custom US Phone Validator with jQuery Validate Plugin

  1. Ravikiran says:

    Is it possible to do unit testing of the above code using Qunit. If yes, how? Please let me know. It would really help.

    Thanks,
    Ravi

  2. Nira says:

    Hi Sir,
    I am trying to validate a US phone number and its accepting 10 digit if I use phoneUS but the problem I am facing is , its not validating the area code of US. I am getting error when I submitting the form am getting the error as”not a valid area code”. atleast this error message should give in the field level itslef not when submitting the form. which is giving blank page because of this error am getting when submit form.Please help me here.

Leave a Reply

Your email address will not be published. Required fields are marked *