MVC validation Data Annotations are not rendering

Question

I am trying to understand why my MVC Data Annotations are not rendering the HTML 5 required tag. I think the problem is HTML5 & MVC related not JQuery validate.

According to documentation here it is supported in all browsers yet the three I dev against, IE, Chrome, Firefox are not rendering the attribute?

My scenario I thought was pretty simplistic.

MVC controller populates a model then passes to the view. User completes fields and clicks submit. Validation ALWAYS passes even if the fields are left blank? The model state is invalid so the controller kicks it back but I would have expected client side validation to have caught the empty fields. I have a jsfiddle to demonstrate but first let me provide the model.

public partial class FinRecordModel
{        
    [Required]
    public virtual string FinName { get; set; }

    [Required]
    public virtual string PageLocation { get; set; }
}

The view:

    @Html.LabelFor(model => model.FinName):
        </td>
        <td class="adminData">
            @Html.EditorFor(model => model.FinName)
            @Html.ValidationMessageFor(model => model.FinName)
        </td>
    </tr>
    <tr>
        <td class="adminTitle">
            @Html.LabelFor(model => model.PageLocation):
        </td>
        <td class="adminData">
            @Html.EditorFor(model => model.PageLocation)
            @Html.ValidationMessageFor(model => model.PageLocation)
        </td>

I created this jsfiddle that uses the html as rendered by the browser and validation always passes.

http://jsfiddle.net/ramjet/mo0v2b76/5/

Now if I add the required attribute as seen in this jsfiddle then everything works as expected so just wondering what is going on???

http://jsfiddle.net/ramjet/mo0v2b76/6/

If this is HTML5 / MVC goofiness as the new HTML standard is still getting incorporated into the web then perhaps I should have a document onload function using jquery to add the required attribute to the input field?

Thank You for your input / advice.

Answer 1

Actually helper class @Html.ValidationMessageFor(//) works when you have data annotations attached to your model. If you used helper class for validation than annotations are required/must used to meet different validations. If you just used helper class i.e @Html.ValidationMessageFor(//) and didn't used annotation tags on your model so jquery validation doesn't render any validation by default.

Hence when you used the required validation on your model, the new view rendered with input tags with required attribute (you can also check this in source code that after you attached required annotation tag in your model, the new page have input tags with required attribute).

Basically annotation tags are nothing but just different validation attributes which HTML 5 supports. You used them in your model and ASP.Net Server rendered them as your client input tags validation attributes and sent the resultant HTML to client.

Yes also you can add your required attribute with jquery onload method but if you are using MVC/C# combination so use annotation tags because that's recommendation.

Answer 2

The standard html helpers render data-xxx attributes used for client side validation in association with jquery.validate.unobtrusive so it does not render the required attribute. If you need this for some other validation plugin you can add html attributes using overloads of the helpers, for example

@Html.TextBoxFor(m => m.FinName, new { required = "required" })

Note if you not using jquery.validate.unobtrusive you can turn it off in the web.config file so that the data-xxx attributes are not created.

<add key="ClientValidationEnabled" value="false" />
<add key="UnobtrusiveJavaScriptEnabled" value="false" />

or at controller level

HtmlHelper.ClientValidationEnabled = false;
HtmlHelper.UnobtrusiveJavaScriptEnabled = false;