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

Question

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:

###-         


        

Answer 1

You should try this, and it works well as per your requirement

jQuery.validator.setDefaults({
  debug: true,
  success: "valid"
});
$( "#myform" ).validate({
  rules: {
    field: {
      required: true,
      phoneUS: true
    }
  }
});

Answer 2

Simply use the phoneUS rule included in the jQuery Validate plugin's additional-methods.js file.

DEMO: http://jsfiddle.net/c9zy9/

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        rules: {
            phone_number: {
                required: true,
                phoneUS: true
            }
        }
    });

});

Alternatively, instead of including the entire additional-methods.js file, you can just pull out the phoneUS method.

DEMO: http://jsfiddle.net/dSz5j/

$(document).ready(function () {

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

    $('#myform').validate({ // initialize the plugin
        rules: {
            phone_number: {
                required: true,
                phoneUS: true
            }
        }
    });

});

Answer 3

@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/

Answer 4

Check out the jQuery Masked Input Plugin. It allows you to mask the input with something like this:

$("#phone_number").mask("999-999-9999");