ASP.Net MVC 3 Unobtrusive validation does not work in partial view

Question

I set the partial view in which my own form tag resides, for example:

<tr> @using (Html.BeginForm("Create")) { <td> @Html.TextBoxFor(model => model.Date) @Html.ValidationMessageFor(model => model.Date) </td> <td> @Html.TextBoxFor(model => model.Amount) @Html.ValidationMessageFor(model => model.Amount) </td> <td> @Html.TextBoxFor(model => model.Tags) @Html.ValidationMessageFor(model => model.Tags) </td> <td> @Html.EnumDropDownListFor(model => model.Type) </td> <td> <input type="submit" value="Add" /> @Html.ValidationSummary(true) </td> } </tr> 

I draw it on the page using @ Html.Action ("Create") (This is part of the table, hence the <tr> tags.

For some odd reason, my client check does not work, and I see errors when posting first.

Is there anything special about partial submissions and customer validation?

I included the following scripts:

 <script src="/Scripts/jquery.1.5.1.min.js" type="text/javascript"></script> <script src="/Scripts/jquery.validate.min.js" type="text/javascript"></script> <script src="/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> 

EDIT

I just tried throwing this script on the page:

 jQuery('form').submit(function () { alert(jQuery(this).valid()); }); 

It prints "true", so the script client check definitely exists and for some reason does not check the corresponding fields: - /

EDIT 2

I uploaded the entire source code of the page (HTML + JS) to pastebin: http://pastebin.com/GvqLW495

Answer 1

I finally found out what makes it fail, it is a fact that my partial view is inside the html table ...

 <table> <tr> <th> Date </th> <th> Amount </th> <th> Tags </th> <th> Type </th> <th> </th> </tr> @Html.Action("Create") </table> 

This will not work, however, if I move @ Html.Action outside the table tag, it works fine.

Answer 2

Edit

I just realized, looking at your code, that you are using jQuery 1.5.1 with (I assume) .NET provided by jQuery.validate. Unfortunately, the two are not yet working together. You need to head in here to get the version that works with the latest jQuery (you will need to use 1.4.4). If this does not work, I still recommend checking out the solution below.

---

I had a similar problem (although I'm not sure if this is the same problem). I wrote about the solution in this blog post . Unfortunately, I cannot be sure that you have the same problem, but it is worth it.

Basically, it came down to the fact that I had to call this line after loading my PartialViews (although I loaded them through AJAX, which I think caused the problem):

 $.validator.unobtrusive.parse($("#validation")); 

See the blog for more details. Hope this helps you.

Answer 3

I think the root of your problem was using the illegal html syntax: The <tr> can only contain <td> tags.
In most cases, a structure like yours will not be displayed in browsers, especially when loading asynchronously.