CODEWITHSUNDEEP
validationasp.net-mvc-4jquery-validatedata-annotationsunobtrusive-validation
Mark Jones
Mark Jones

Reputation: 1501

Strange MVC 4 validation behaviour when using DataType.EmailAddress

I am using unobtrusive javascript and data annotations for my validation, and it works fine. I decided to decorate my view model properties with DataType attributes. For the most part this to is fine, with the exception of DataType.EmailAddress

When I add this attribute, I suddenly get extra validation on this field, that renders a call out on the field, a bit like the validation call out in the Ajax Control toolkit. Only the style is different with a thick red boarder to the element being validated, and the callout is below. The call out also displays a message not specified in my view model. The regex I have for validation has an error message of “The email address you have entered is invalid” whereas the message in the callout is “You must enter a valid email address”. I have tried searching my solution for this text and it is not found. Finally the only scripts I have loaded are:

<script src="/Public/javascript/jquery-1.9.1.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>
<script src="/Public/javascript/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script src="/Public/javascript/jquery.validate.js" type="text/javascript"></script>
 <script src="/Public/javascript/jquery.validate.unobtrusive.js" type="text/javascript"></script>

And css:

<link href="/Public/themes/ui-darkness/jquery-ui-1.9.2.custom.min.css" rel="stylesheet" type="text/css" />
<link href="/Content/PagedList.css" rel="stylesheet" type="text/css" />
    <link href="/Public/css/reset.css" rel="stylesheet" type="text/css" />

I am also using @Html.EditorFor to render all my fields throughout my view.

Can anyone shed any light on what is happening? Where is this callout coming from? Can I disable it? Can I use it and have it on the rest of my fields? Should I just remove DataType.EmailAddress?

Upvotes: 0

Views: 895

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1039130

In ASP.NET MVC 4, when you decorate a property with [DataType(DataType.EmailAddress)], the corresponding EditorFor will generate an input field with type="email":

<input type="email" name="foo" value="[email protected]" />

This is HTML5 that some modern browsers support. So if you happen to be browsing your site with a modern browser, this validation is automatically built-in. It has absolutely nothing to do with ASP.NET MVC. Of course if the browser doesn't understand the type="email" field it will simply consider it as a simple text field.

Check this fiddle out with Google Chrome for an example.

Upvotes: 4

Related Questions