9

I'm using data annotations in my ASP.NET MVC4 project to perform client-side validation on email and phone fields. Email is successfully validating in the client but phone doesn't - it allows me to enter invalid characters and only warns me on submission of the form (rather than immediately after the character is typed)

In the model:

[Required(ErrorMessage = "Email is required")]
[DataType(DataType.EmailAddress)]
[EmailAddress]
[Display(Name = "Email")]
public string Email{ get; set; }

[Required(ErrorMessage = "Mobile is required")]
[DataType(DataType.PhoneNumber)]
[Phone]
[Display(Name = "Mobile number")]
public string Mobile { get; set; }

In the view I believe I'm including the correct script references:

<script type="text/javascript" src="~/Scripts/jquery.validate.min.js" ></script
<script type="text/javascript" src="~/Scripts/jquery.validate.unobtrusive.min.js" ></script>

..and using html helpers (I'm using TextBoxFor rather than EditorFor as I'm applying class attributes which I have omitted here for clarity)

@Html.LabelFor(model => model.Email)
@Html.ValidationMessageFor(model => model.Email)
@Html.TextBoxFor(model => model.Email, new { @type = "email" })       

@Html.LabelFor(model => model.Mobile)
@Html.ValidationMessageFor(model => model.Mobile)
@Html.TextBoxFor(model => model.Mobile, new { @type = "phone" }) 

What am I missing?

4 Answers 4

6
[Required(ErrorMessage = "Mobile is required")]
[RegularExpression(@"^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$", ErrorMessage = "Entered mobile format is not valid.")]
public string Mobile{get; set;}

It will match numbers like: 0123456789, 012-345-6789, (012)-345-6789 etc.

2

MVC 4 has a built-in display template for EmailAddress but not PhoneNumber. You need to create a custom DisplayTemplate for [DataType(DataType.PhoneNumber)].

Add the following file (you will likely have to create the subfolder DisplayTemplates):
Views\Shared\DisplayTemplates\PhoneNumber.cshtml

@model System.String
@if (Model != null)
{
    @:@System.Text.RegularExpressions.Regex.Replace(@Model, "(\\d{3})(\\d{3})(\\d{4})", "$1-$2-$3")
}
0

I think the problem is that phone type is just not supported. See phone type support at w3schools

4
  • Perhaps it would be better to ask the OP (using a comment) what phone type is being used; it might be a supported type in which case this isn't the answer...
    – einpoklum
    Commented Nov 21, 2013 at 13:41
  • @OzAnt - are you saying that instead of type = "phone" I should be using new type = "tel" ?? Commented Dec 6, 2013 at 14:18
  • 1
    @LiamWeston - Not exactly: w3schools says HTML5 defines a telephone input type with type=tel, not phone, BUT this type is not supported by any browser (as I guess phone numbers are different in each country). So you might be better off validating your phone number with your own regex in your model and applying it to the client side. Looks like it is more of a hint as the iPhone recognises type="tel", and completely changes the keyboard to the standard phone keyboard see [link]html5doctor.com/html5-forms-input-types/#input-tel
    – OzAnt
    Commented Dec 9, 2013 at 6:29
  • Thanks - that was the conclusion I came to. Commented Mar 4, 2014 at 12:36
0

use EditorFor insted of TextBoxFor for Email, then it will gives error ok keyup in email field.

1
  • @Html.LabelFor(model => model.Email) @Html.ValidationMessageFor(model => model.Email) @Html.EditorFor(model => model.Email) Use this for Email Validations Commented Nov 24, 2015 at 13:57

Your Answer

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

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