1

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 (000)-000-0000 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; }
0

4 Answers 4

10

I was looking into the same thing. Here's what I ended up with:

[Required]
[DataType(DataType.PhoneNumber)]
[Display(Name = "Phone number")]
[RegularExpression(@"^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$", ErrorMessage = "Not a valid number")]
public string PhoneNumber { get; set; }

This will look for 3 numbers; (possible parenthesis around them) with possibly a dash, period, or space between; then 3 numbers, possibly a dash, period, or space between; then 4 numbers.

I cobbled it together from here: http://blog.stevenlevithan.com/archives/validate-phone-number

4
  • Use @"^(?([0-9]{3}))?[-. ]?([0-9]{3})[-. ]?([0-9]{4}).*$" instead to allow extensions to be tacked onto the end. Feb 3, 2015 at 22:11
  • you can get the actual RegEx that ms uses in the Phone attribute here: github.com/microsoft/referencesource/blob/master/…
    – Hardrada
    Jun 24, 2019 at 13:14
  • @Hardrada That didn't exist until .NET 4.5. You have to remember that this answer is 7 years old. That being said, Microsoft is far more generous as to what is a valid phone number that this regex is. Jun 25, 2019 at 18:33
  • Don't take it personally. I just posted it for those who stumble upon this during the present. It's all about helping. Skål
    – Hardrada
    Jun 25, 2019 at 18:44
2

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.

2

I have same scenario, but I was able to achieve above format ex: (111) 111-1111 when start typing phone number it force to change the format as required using following code snippets/changes

  1. Download the scrip file from phone mask script file
  2. Tag jscript functions ex:

    @Html.TextBoxFor(m => m.DayPhone, new { @class = "form_input",
                       onkeydown = "javascript:backspacerDOWN(this,event);",
                       onkeyup = "javascript:backspacerUP(this,event);" })
    

    in your razor syntax or your convenient asp.net html format.

hope that helps you !!!

0

If I understand right your question, you can use RegularExpressionAttribute, then via jquery unobrtrusive validation you have your clietn validating you input

1
  • i need pattern which displays in above format and validate only allowing 10 digits server-side.
    – updev
    Mar 23, 2012 at 14:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.