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>

Answer 1

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.