Unobtrusive check does not work on some elements

Question

I have a very strange problem with unobtrusive checking.

I have a model with the Required attribute for three shuffle properties. I use TextBoxFor for two fields, and TextAreaFor for the last. Validation works on TextArea, but NOT on input fields. Looking at the source, I see that the attributes that validation adds are not in the inputs, but ARE in the text box. In addition, if I enter data in a text box and send it messages and MVC model binding, then correctly set ModelState.IsValid to false and ValidationSummary will display the fields.

What can cause validation not to work with 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 check with almost your identical code sample, and a check for proper operation at my end. I would start to remove elements until you find something that contradicts your check.

For reference, here is what my test looks like:

Controller:

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

The test model 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 almost identical. Note that I did not implement the section for script libraries, but directly referenced them in 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.