Question

I have enabled the unobtrusive validation. My page source looks looks like this.

<p>
    <label>
        Project Title
        <br />
        <input class="project-title" data-val="true" data-val-required="The Project Title field is required."
            id="RequestDetail_ProjectTitle" name="RequestDetail.ProjectTitle" type="text"
            value="" />
    </label>
    <span class="field-validation-valid" data-valmsg-for="RequestDetail.ProjectTitle"
        data-valmsg-replace="true"></span> </p> <p>
    <span>Submitted By</span><br />
    <span class="inline-container">
        <input type="hidden" id="RequestDetail_SubmittedBy" name="RequestDetail.SubmittedBy"
            value="0" data-type="RequestDetail.SubmittedBy" /><label><input type="radio" data-type="RequestDetail.SubmittedBy"
                name="_RequestDetail.SubmittedBy" value="1" data-val="true" data-val-required="The Submitted By field is required." />ND</label>
        |
        <label>
            <input type="radio" data-type="RequestDetail.SubmittedBy" name="_RequestDetail.SubmittedBy"
                value="2" data-val="true" data-val-required="The Submitted By field is required." />NE</label>
        |
        <label>
            <input type="radio" data-type="RequestDetail.SubmittedBy" name="_RequestDetail.SubmittedBy"
                value="4" data-val="true" data-val-required="The Submitted By field is required." />WY</label>
        |
        <label>
            <input type="radio" data-type="RequestDetail.SubmittedBy" name="_RequestDetail.SubmittedBy"
                value="8" data-val="true" data-val-required="The Submitted By field is required." />CL</label>
    </span><span class="field-validation-valid" data-valmsg-for="_RequestDetail.SubmittedBy"
        data-valmsg-replace="true"></span> </p> <p>
    <span>Affected Plans</span><br />
    <span class="inline-container">
        <input type="hidden" id="RequestDetail_AffectedPlans" name="RequestDetail.AffectedPlans"
            value="0" data-type="RequestDetail.AffectedPlans" /><label><input type="checkbox"
                data-type="RequestDetail.AffectedPlans" name="_RequestDetail.AffectedPlans" value="1"
                data-val="true" data-val-required="The Affected Plans field is required." />ND</label>
        |
        <label>
            <input type="checkbox" data-type="RequestDetail.AffectedPlans" name="_RequestDetail.AffectedPlans"
                value="2" data-val="true" data-val-required="The Affected Plans field is required." />NE</label>
        |
        <label>
            <input type="checkbox" data-type="RequestDetail.AffectedPlans" name="_RequestDetail.AffectedPlans"
                value="4" data-val="true" data-val-required="The Affected Plans field is required." />WY</label>
    </span><span class="field-validation-valid" data-valmsg-for="_RequestDetail.AffectedPlans"
        data-valmsg-replace="true"></span> </p>

Here is the output of it when validated.

I have applied everything the same way with Radio buttons and the Check boxes shown in this. But why am I not getting the validation error in the Check boxes, while I get what I expected in Radio buttons.

Answer 1

If you think about it, the checkboxes will pass validation whether they are ticked or not. They will (presumably) be backed by a bool property in your model, and so must be either true or false. Ticked they are true, unticked they are false – which is a perfectly valid value for a bool. The only invalid value in this case would be null which is not possible with a checkbox.

If your goal is to validate that the user has ticked the box, you will need a MustBeTrue validator – see here for an example.

If true and false are both valid values, and you want to force a user to pick one or the other, use a drop-down with “Yes”, “No”, and “Please specify” as options.