CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3htmlc#-4.0
updev
updev

Reputation: 633

MVC Validation for US phone number (000)-000-0000 or 000-000-0000

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; }

Upvotes: 1

Views: 20448

Answers (4)

MiniRagnarok
MiniRagnarok

Reputation: 959

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

Upvotes: 10

RK_Muddala
RK_Muddala

Reputation: 61

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 !!!

Upvotes: 2

nightshifted
nightshifted

Reputation: 538

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.

Upvotes: 2

Iridio
Iridio

Reputation: 9271

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

Upvotes: 0

Related Questions