First html helper generates client-side validation attributes, while the second one doesn't

Question

Let's say I have this model:

public class Person
{
    public bool IsApproved { get; set; }
}

And whis this codes, I am trying to render input with check type:

@Html.CheckBoxFor(x => x.IsApproved)
@Html.CheckBox("IsApproved")

But, the results are different:

// CheckBoxFor result
<input data-val="true" data-val-required="The IsApproved field is required." id="IsApproved" name="IsApproved" type="checkbox" value="true">
<input name="IsApproved" type="hidden" value="false">

// CheckBox result
<input id="IsApproved" name="IsApproved" type="checkbox" value="true">
<input name="IsApproved" type="hidden" value="false">

How and why, the first one generates attributes for client-side validation, while the other didn't?

Update:

After swapping the order of @Html.CheckBoxFor and @Html.CheckBox, the order of markup elements didn't change.

Answer 1

The CheckBox() helper does not render thedata-val attributes because the form has already rendered CheckBoxFor() for the same property. If you swap the order, the data-val attributes would be rendered for CheckBox() (and not for CheckBoxFor()).

My understanding is this would cause a potential (duplication) problem with jquery.validation.unobtrusive when parsing the form.

The html helpers for controls internally call the GetUnobtrusiveValidationAttributes() method of HtmlHelper. From the source code (my emphasis)

Only render attributes if unobtrusive client-side validation is enabled, and then only if we've never rendered validation for a field with this name in this form. Also, if there's no form context, then we can't render the attributes (we'd have no to attach them to)

public IDictionary<string, object> GetUnobtrusiveValidationAttributes(string name, ModelMetadata metadata)
{