Question

How can you annotate phone number data annotation for phone number validation?

Is there way to allow this format in front-end like using HTML5 pattern? I know that there is data type for phone number in both HTML5 and MVC3 but was wondering if we can format that in something like [phone] or 000-000-0000 so user can not enter more than 10 digits and if he enters a phone it displays in above formats. I tried this so far:

    [Required]
    [DataType(DataType.PhoneNumber)]
    [RegularExpression(@"^(\d{10})$", ErrorMessage = "Please enter proper phone number.")]
    [Display(Name = "phone")]
    public string Phone { get; set; }

Answer 1

You might be interested in a jQuery mask plugin.

http://digitalbush.com/projects/masked-input-plugin/

Or you could set a .blur on your phone number input that will format the user’s input if there are 10 digits. For instance:

$("#PhoneNumber").blur(function (event) {
    var phoneNumber = $(this).val();
    // replace all non-numeric characters in phoneNumber
    // do regex check on remaining digits to ensure there are 10 digits
    // if regex passes, format phoneNumber however you like
    %(this).val(phoneNumber);
});

However, in the second case, you will have to change your regular expression data annotation because formatting the phone number in this way will always fail your current regular expression check. Whatever format you want the user to submit the phone number should be the format of this regular expression validation.