Unobtrusive validation not working on some elements

Question

I have a very odd problem with unobtrusive validation.

I have a model with a Required attribute on three stirng properties. I'm using TextBoxFor for two of the fields, and TextAreaFor for the last. The validation is working on the TextArea, but NOT on the input fields. Looking at the source, I can see that the attributes that the validation adds are not on the inputs, but ARE on the text box. Additionally, if I enter data into the text box and submit, it posts and MVC model binding DOES correctly set ModelState.IsValid to false and the ValidationSummary shows the fields.

What would cause the validation to not work on the input elements?

Model:

    public class TestModel : IEmail {
        public string BCCAddresses {
            get;
            set;
        }

        [Required]
        public string BodyFormat {
            get;
            set;
        }

        public string CCAddresses {
            get;
            set;
        }

        [Required]
        public string FromAddress {
            get;
            set;
        }

        [Required]
        public string SubjectLineFormat {
            get;
            set;
        }
  }

View:

@section head {
    <script src="@Url.Content( "~/Scripts/jquery.1.7.1.min.js" )" type="text/javascript"></script>
    <script src="@Url.Content( "~/Scripts/jquery.validate.min.js" )" type="text/javascript"></script>
    <script src="@Url.Content( "~/Scripts/jquery.validate.unobtrusive.min.js" )" type="text/javascript"></script>

}


@{
    Html.EnableClientValidation();
    Html.EnableUnobtrusiveJavaScript();
}

            @using ( Html.BeginForm( "Edit", "Email", FormMethod.Post ) ) {
                <table>
                    <tr>
                        <td>From</td>
                        <td>@Html.TextBoxFor( x => x.FromAddress, new { style = "width: 500px;" } )</td>
                    </tr>
                    <tr>
                        <td>CC</td>
                        <td>@Html.TextBoxFor( x => x.CCAddresses, new { style = "width: 500px;" } )</td>
                    </tr>
                    <tr>
                        <td>BCC</td>
                        <td>@Html.TextBoxFor( x => x.BCCAddresses, new { style = "width: 500px;" } )</td>
                    </tr>
                    <tr><td colspan="2">&nbsp;</td></tr>
                    <tr>
                        <td colspan="2">Subject Line</td>
                    </tr>
                    <tr>
                        <td colspan="2">@Html.TextBoxFor( x => x.SubjectLineFormat, new { style = "width: 500px;" } )</td>
                    </tr>
                    <tr><td colspan="2">&nbsp;</td></tr>
                    <tr>
                        <td colspan="2">Body Form</td>
                    </tr>
                    <tr>
                        <td colspan="2">@Html.TextAreaFor( x => x.BodyFormat, new { style = "width: 500px; height: 200px" } )</td>
                    </tr>
                    <tr><td colspan="2">&nbsp;</td></tr>
                    <tr>
                        <td colspan="2">
                            <input id="ApplyChanges" type="submit" class="NavigationButton"  value="Save Changes" /> 
                            <input id="CancelChanges" type="button" class="NavigationButton" value="Cancel Changes" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            @Html.ValidationSummary()
                        </td>
                    </tr>
                    <tr><td colspan="2">&nbsp;</td></tr>
                </table>
            }

Browser source:

<form action="/url" method="post">
                <table>
                    <tbody><tr>
                        <td>From</td>
                        <td><input style="width: 500px;" id="FromAddress" name="FromAddress" value="" type="text"></td>
                    </tr>
                    <tr>
                        <td>CC</td>
                        <td><input style="width: 500px;" id="CCAddresses" name="CCAddresses" value="" type="text"></td>
                    </tr>
                    <tr>
                        <td>BCC</td>
                        <td><input style="width: 500px;" id="BCCAddresses" name="BCCAddresses" value="" type="text"></td>
                    </tr>
                    <tr><td colSpan="2">&nbsp;</td></tr>
                    <tr>
                        <td colSpan="2">Subject Line</td>
                    </tr>
                    <tr>
                        <td colSpan="2"><input style="width: 500px;" id="SubjectLineFormat" name="SubjectLineFormat" value="" type="text"></td>
                    </tr>
                    <tr><td colSpan="2">&nbsp;</td></tr>
                    <tr>
                        <td colSpan="2">Body Form</td>
                    </tr>
                    <tr>
                        <td colSpan="2"><textarea style="width: 500px; height: 200px;" id="BodyFormat" cols="20" rows="2" name="BodyFormat" data-val-required="The BodyFormat field is required." data-val="true"></textarea></td>
                    </tr>
                    <tr><td colSpan="2">&nbsp;</td></tr>
                    <tr>
                        <td colSpan="2">
                            <input id="ApplyChanges" class="NavigationButton" disabled="disabled" value="Save Changes" type="submit"> 
                            <input id="CancelChanges" class="NavigationButton" value="Cancel Changes" type="button">
                        </td>
                    </tr>
                    <tr>
                        <td colSpan="2">
                            <div class="validation-summary-valid" data-valmsg-summary="true"><ul><li style="display: none;"></li>
</ul></div>
                        </td>
                    </tr>
                    <tr><td colSpan="2">&nbsp;</td></tr>
                </tbody></table>
</form>

@kendaleiv Ya, no kidding. Care to tell me why its not being added automatically like it is for the text area? — Andy
For starters.. notice that your textbox's have no data-val definitions. if you can figure out why that is, you will be golden — Jed
@Jed and others. Ya, I can see that's why the validation isn't working right. My question is WHY isn't this being done when the Html helper emits the code? Notice that I didn't include those attributes for the text area, MVC picked up the data annotation on the model and emitted it for me. The problem is its not doing it for the text boxes for some reason. That's the question... why isn't it? — Andy

Jesse Jesse · Accepted Answer · 2012-03-03T02:57:06

I performed a quick test with almost your identical sample code and the validation is working fine on my end. I would start stripping items back until you find what is conflicting with your validation.

For references here is what my test looked like:

Controller:

public ActionResult Index()
{
    var model = new TestModel();
    return View("Index", model);
}

The test model I used did not inherit from " IEmail":

public class TestModel
{
    public string BCCAddresses
    {
        get;
        set;
    }

    [Required]
    public string BodyFormat
    {
        get;
        set;
    }

    public string CCAddresses
    {
        get;
        set;
    }

    [Required]
    public string FromAddress
    {
        get;
        set;
    }

    [Required]
    public string SubjectLineFormat
    {
        get;
        set;
    }
}

And my view was pretty much identical. Note, that I did not implement a section for the script libraries but directly referenced them within thew view. EG:

<script src="@Url.Content("~/Scripts/jquery.1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

Hope this helps.

Unobtrusive validation not working on some elements

1 Answers