Phone Number Validation MVC

Question

I am trying to use a regular expression to validate a phone number and return an error when an invalid number or phone number is submitted.

MVC Code:

<ol class="row">
    <li class="cell" style="width: 20%;">Phone Number:</li>
    <li class="cell last" style="width: 60%;">
        @Html.TextBoxFor(model => model.PhoneNumber, new { @class = "textbox" }) 
        @Html.ValidationMessageFor(model => model.PhoneNumber)
    </li>
</ol>

C# Code:

[DataType(DataType.PhoneNumber)]
[Display(Name = "Phone Number")]
[Required(ErrorMessage = "Phone Number Required!")]
[RegularExpression(@"^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$",
                   ErrorMessage = "Entered phone format is not valid.")]
public string PhoneNumber { get; set; }

However, the input box will not show a message to the user indicating that the phone number which was submitted is not valid.

The input box will not show a message to the user indicating that the phone number which was submitted is not valid. — Leonardo Wildt
– Leonardo Wildt, Commented Mar 6, 2015 at 18:05

bwegs · Accepted Answer · 2018-04-05 04:02:59Z

80

Model

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

View:

@Html.LabelFor(model => model.PhoneNumber)
@Html.EditorFor(model => model.PhoneNumber)
@Html.ValidationMessageFor(model => model.PhoneNumber)

edited Apr 5, 2018 at 4:02

bwegs

3,7752 gold badges33 silver badges34 bronze badges

answered Mar 6, 2015 at 18:17

meda

45.5k14 gold badges96 silver badges123 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jess Over a year ago

What about DisplayFor? Can it take a string like 8005551212 and convert it to (800) 555-1212?

Adam Over a year ago

Is this DataAnnotation alone is not enough ? [DataType(DataType.PhoneNumber)]. If we need regex for validation then why do we need the DataType.PhoneNumber. What's it purpose ?

meda Over a year ago

well obviously because not every country has the same format of phone numbers

Pap Over a year ago

If you have to supply the Regular Expression that does the phone number validation, then what's the purpose of the [DataType(DataType.PhoneNumber)] attribute?

Slan · Accepted Answer · 2016-06-15 08:18:09Z

9

Try for simple regular expression for Mobile No

[Required (ErrorMessage="Required")]
[RegularExpression(@"^(\d{10})$", ErrorMessage = "Wrong mobile")]
public string Mobile { get; set; }

answered Jun 15, 2016 at 8:18

Slan

5602 gold badges6 silver badges18 bronze badges

Comments

DLeh · Accepted Answer · 2015-03-06 18:13:37Z

7

You don't have a validator on the page. Add something like this to show the validation message.

@Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })

answered Mar 6, 2015 at 18:13

DLeh

24.6k17 gold badges96 silver badges141 bronze badges

Comments

Darshan · Accepted Answer · 2015-12-31 11:28:05Z

4

Along with the above answers Try this for min and max length:

In Model

[StringLength(13, MinimumLength=10)]
public string MobileNo { get; set; }

In view

 <div class="col-md-8">
           @Html.TextBoxFor(m => m.MobileNo, new { @class = "form-control" , type="phone"})
           @Html.ValidationMessageFor(m => m.MobileNo,"Invalid Number")
           @Html.CheckBoxFor(m => m.IsAgreeTerms, new {@checked="checked",style="display:none" })
  </div>

answered Dec 31, 2015 at 11:28

Darshan

713 bronze badges

Comments

Slan · Accepted Answer · 2016-06-15 08:52:09Z

1

Try this:

[DataType(DataType.PhoneNumber, ErrorMessage = "Provided phone number not valid")]

answered Jun 15, 2016 at 8:52

Slan

5602 gold badges6 silver badges18 bronze badges

1 Comment

Adam Over a year ago

This alone is not working. I have to add regular expression check as well.

Thomas Fonseca · Accepted Answer · 2016-07-01 20:42:29Z

1

Or you can use JQuery - just add your input field to the class "phone" and put this in your script section:

$(".phone").keyup(function () {
        $(this).val($(this).val().replace(/^(\d{3})(\d{3})(\d)+$/, "($1)$2-$3"));

There is no error message but you can see that the phone number is not correctly formatted until you have entered all ten digits.

answered Jul 1, 2016 at 20:42

Thomas Fonseca

5424 silver badges12 bronze badges

Comments

Community · Accepted Answer · 2020-06-20 09:12:55Z

[DataType(DataType.PhoneNumber)] does not come with any validation logic out of the box.

According to the docs:

When you apply the DataTypeAttribute attribute to a data field you must do the following:

Issue validation errors as appropriate.

The [Phone] Attribute inherits from [DataType] and was introduced in .NET Framework 4.5+ and is in .NET Core which does provide it's own flavor of validation logic. So you can use like this:

[Phone()]
public string PhoneNumber { get; set; }

However, the out-of-the-box validation for Phone numbers is pretty permissive, so you might find yourself wanting to inherit from DataType and implement your own IsValid method or, as others have suggested here, use a regular expression & RegexValidator to constrain input.

Note: Use caution with Regex against unconstrained input per the best practices as .NET has made the pivot away from regular expressions in their own internal validation logic for phone numbers

ASPaiva · Accepted Answer · 2020-07-11 19:21:46Z

0

The phone number data annotation attribute is for the data type, which is not related to the data display format. It's just a misunderstanding. Phone number means you can accept numbers and symbols used for phone numbers for this locale, but is not checking the format, length, range, or else. For display string format use the javascript to have a more dynamic user interaction, or a plugin for MVC mask, or just use a display format string properly.

If you are new to MVC programming put this code at the very end of your view file (.cshtml) and see the magic:

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#the_id_of_your_field_control").keyup(function () {
            $(this).val($(this).val().replace(/^(\d{2})(\d{5})(\d{4})+$/, "($1) $2-$3"));
        });
    });
</script>

This format is currently used for mobile phones in Brazil. Adapt for your standard.

This will add the parenthesis and spaces to your field, which will increase the string length of your input data. If you want to save just the numbers you will have to trim out the non-numbers from the string before saving.

edited Jul 11, 2020 at 19:21

answered Jul 11, 2020 at 19:06

ASPaiva

16310 bronze badges

1 Comment

ASPaiva Over a year ago

If you have more than one phone field in the same view you can change the #the_id_of_your_field_control for a class name like ".the_phone_class_name" like @Thomas-Fonseca used above to spread the solution over all fields with that class.

Collectives™ on Stack Overflow

Phone Number Validation MVC

8 Answers 8

4 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

4 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related