jQuery Validation plugin: How to force a certain phone number format ###-###-####

jquery, jquery-validate

Solution

@Sparky's suggestion is good if you are a little flexible, but just in case you want just that format, you can add a custom rule:

$.validator.addMethod('customphone', function (value, element) {
    return this.optional(element) || /^\d{3}-\d{3}-\d{4}$/.test(value);
}, "Please enter a valid phone number");

$(document).ready(function () {
    $("#myform").validate({
        rules: {
            field1: 'customphone'
        }
    });
});

Example: http://jsfiddle.net/kqczf/16/

You can easily make this into a custom class rule. This way you could just add a class to each input that you want to have the rule and possibly omit the rules object from the `validate` call:

$(document).ready(function () {
    $("#myform").validate();
});

<input type="text" name="field1" id="field1" class="required customphone" />

Example: http://jsfiddle.net/kqczf/17/

Problem

I have jQuery Validation plugin on a page. When someone types the phone number into the form field, I want the validator to only recognize a certain format: ``` ###-###-#### ``` I see this in the JavaScript: ``` phone_number: { required: true, number: true }, ``` Can I add something there to specify the required format for the phone number? I found something about adding the jQuery Mask plugin, but if I can avoid it, I'd rather not add to the page weight. (Plus...surely there must exist some way to validate only a certain format.)

Original source