ASP.Net MVC 3 Unobtrusive validation not working on Partial View

Question

I've setup a partial view which houses its own form tag, like so:

<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 render it on a page using @Html.Action("Create") (It's part of a table, hence the <tr> tags.

For some odd reason my clientside validation isn't working, and I first see the errors upon posting.

Is there something special about partial views and clientside validation ?

I have 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 tossing this script onto the page:

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

It alerts 'true', so the clientside validation script is definately there, and for some reason it's not checking the fields in question :-/

EDIT 2

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

Censure

Answer 1

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

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

This doesn't work, however if I move the @Html.Action outside the table tag, it works just fine.

Censure

Quick note. @JasCav's comment about scripts being loaded in the partial view was the answer for me. It makes sense that if you are not using your master layout (hence the partial) then none of the validation scripts are going to load. There are heaps of articles on how to get around this, but I just added a script reference to my partial view and everything worked as expected. This also works on jquery 1.5.1 – Venusberg

@nameEqualsPNamePrubeGoldberg - ok this is bit late, but can you please explain "if you are not using your master layout (hence the partial) then none of the validation scripts are going to load". I have the same scenario as above, loading partial via $.get and all js (validations etc) are in .layout, why do i still need to need to add the line mentioned in JasCav's comment? – Likelihood

Answer 2

Edit:

I just realized, looking at your code, that you're using jQuery 1.5.1 with the (I'm assuming) .NET provided jQuery.validate. Unfortunately, those two do not work together yet. You'll have to head to here to grab a version that works with the latest jQuery (you'll need to use 1.4.4). If that doesn't work, I would still recommend checking out the solution below.

---

I had a similar problem (although I'm not sure it's the exact same problem). I wrote about the solution in this blog post. Unfortunately, I can't be sure you're having the same exact problem, but it's worth a shot.

Basically, it boiled down to the fact that I had to call this line after loading my PartialViews (although I was loading them via AJAX which is what I think caused the problem):

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

See the blog post for more detail. Hopefully it helps you out.

Dudley

I can see why that'd be necessary with AJAX loaded views. But like you said, I don't load them through AJAX. I just tried the solution from the blog post out - unfortunately it didn't help :-/ – Censure

@Censure - Look at my update. I just realized that I completely missed what JavaScript files you were loading. Try version 1.4.4 of jQuery and see if that fixes the problem. – Dudley

@Dudley - I just tried using 1.4.4 without luck either. The funny part is my unobtrusive validation works fine on whole pages. (Using both 1.5.1 and 1.4.4) It's just partial views which won't validate. – Censure

@Censure - :-( Dang it. Is it all partial views, or just this one (with the tables)? Also...just a dumb question...are you sure your partial views are loading on pages that load those JavaScript files? (Dumb question, but, sometimes the dumb things can get you.) Sorry I couldn't be a better help. – Dudley

@Dudley - I haven't tried partial views other places, so I can't really tell :-( As for the pages, yes I've checked the source, the scripts are there. Look at my update to the question as well, perhaps it clarifies something. – Censure

@Censure - I took a look at your update, and even tried to create my own solution following what you did. I appear to be having the same problem. (Everything works in my own website, however.) I'm a bit stumped... – Dudley

@Dudley - Well at least it's not just me then :-D I'll get to work on it later today (probably in around 9 hours or so) and let you know how it goes. – Censure

@Dudley - Check my latest edit (3), i found out what's causing this :-) – Censure

@Censure - Interesting. Glad you solved it. Also, you may want to post your solution as an answer and accept your own answer (so others can find this in the future). I'm guessing this might be a problem other people will run into. – Dudley

This is the new link for those interested jasoncavett.com/2011/03/… – Cervical

Answer 3

I think that the root of your problem wat the use of illegal html syntax: <tr> tag can only contain <td> tags.
In most cases structure like your's won't be rendered correcty in browsers, especiallywhen loaded asynchronously.

Reticent