Why validation is not working with Html.TextBoxFor but is when using Html.EditorFor?

Question

I am trying MVC's datatype attributes, and just created a simple scenario like the following:

The View:

@model MVC4.Models.Model

@{
    ViewBag.Title = "DataTypeAttribute";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

<h2>DataTypeAttribute</h2>


@using (Html.BeginForm("SubmitData", "Home"))
{
    <div>
        @Html.ValidationSummary()
    </div>

    @Html.EditorFor(m => m.Email)
    <br />
    <br />
    @Html.EditorFor(m => m.PostalCode)

    <br />
    <br />
    @Html.EditorFor(m => m.TextOnly)
    <br />
    <br />

    <button type="submit">Submit</button>
}

The Model:

public class Model
{
    [DataType(DataType.EmailAddress)]

    [Required]
    //[EmailAddress]
    public string Email { get; set; }

    [DataType(DataType.PostalCode)]
    public string PostalCode { get; set; }


    public string TextOnly { get; set; }
}

"SubmitData" is just a controller that, returns View(..., model) if ModelState.IsValid is false.

Although posts like this do a good job in tackling the differences between Html.TextBoxFor and Html.EditorFor, I could not find an answer as to why validation for the datatype EmailAddress will not work when using TextBoxFor. I did find people mentioning TextBoxFor does not take metadata into account, while EditorFor does.

But does this make sense ? So TextBoxFor does not offer support for client validations ?!

I wonder what is the reason for the difference between the two ?

Answer 1

TextBoxFor() does work with validations.

[DataType(DataType.EmailAddress)] is not a validation attribute. Its an attribute that determines the type of input to display by setting the type attribute in the rendered html. For example <input type="text" ..>, <input type="date" ..>, <input type="email" ..> in order to render the browsers implementation of a HTML4 datepicker, email input etc.. It works only for EditorFor() because TextBoxFor() as its name suggest generates and input with type="text"

If you want validation for an email address, then you use the [EmailAddress] attribute on your property.

[Required]
[EmailAddress]
public string Email { get; set; }

Edit (further to the comments)

One of the features of HTML5 is the ability to validate user data without relying on scripts. One such form of browser validation is using the type attribute. The use of [DataType(DataType.EmailAddress)] on a property that is rendered with @Html.EditorFor() adds type="email" to the input element. From the MDN documentation

email: The element represents one email address. Line breaks are automatically stripped from the input value. An invalid email address can be set, but the input field will only satisfy its constraints if the email address satisfies the ABNF production 1*( atext / "." ) "@" ldh-str 1*( "." ldh-str ) where atext is defined in RFC 5322 section 3.2.3, and ldh-str is defined in RFC 1034 section 3.5.

If your are currently seeing a validation error message associated with the property, and you have not added the [EmailAddress] attribute, then it means that jquery.validate.js is not loaded and you are seeing the browsers error message associated with type="email".

When jquery.validate.js is loaded (correctly), the novalidate="novalidate" attribute is added to the form element, which specifies that form is not to be validated (using the HTML5 validation) when submitted. The relevant code from jquery.validate.js is (approx line 35)

// Add novalidate tag if HTML5.
this.attr('novalidate', 'novalidate');

This is added to prevent possible confusion between error messages displayed by browser validation and jquery unobtrusive validation.

As to why DataTypeAttribute attribute inherits ValidationAttribute when it does not actually do validation, from Brad Wilson himself in this answer

The reason it derives from ValidationAttribute is so that you could create a new custom data type class, which was both a DataType and a Validation, all wrapped up into one. It's an unfortunate side-effect of .NET not allowing multiple inheritance.