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.