Dynamic partial view + jquery form hijack + client validation = not working

Question

I'm using MVC 3 with unobtrusive javascript for client validation.

I have a table with rows which are clickable. When clicked I want to bring up a dynamically loaded partial view. This is the code for this:

function GetStuff(id) {
    $.ajax(
    {
        url: "Edit/" + id,
        success: function (result) {
            $("#DivTest").html(result);
        }
    });
}

This far everything works. The problem is when I'm trying to save something in the partial using jquery. The form is hijacked, like this:

$(function () {
    $.post($(this).attr("action"),
        $(this).serialize(),
        function (data) {
            alert("test");
        });
    e.preventDefault();
});

This all together makes the client validation not work. It just makes the post even if I have left out some required values. This all works if I'm not using ajax to post or if the partial is loaded on page load (not dynamic).

---

What I've tried:

I tried putting this before the post:

if($('form').validate().form()){
    ...
}

This just returns true every time though..

From this post i got 2 suggestions ASP.NET MVC 2 loading partial view using jQuery - no client side validation

Adding

Sys.Mvc.FormContext._Application_Load(); 

after the partial has been loaded.. And set the datatype of the post to "html". Neither worked.

I also tried this method with no luck: http://www.deepcode.co.uk/2010/08/mvc-ootb-validation-when-pulling-in.html

This combination of techniques are something very common I guess, why is it so hard to make it work? Any help is highly appreciated. Thank you

Answer 1

Upon the successfull ajax load of the new form you have to instruct the unobtrusive validation library to parse the new form by manually calling:

// insert new form into the DOM first, then call:
$.validator.unobtrusive.parse('<form selector>'));
$('<form selector>').validate(); // start validating

This sets up the jquery.validation validators according to the data-xxx attribute in the forms child elements.

After that the call $('<form selector>').validate().form() should work as expected!

Answer 2

Why are you trying to hijack the partial form? I think because your hijacking the form the unobtrusive live events are not firing and thats why your not getting validation errors.

Have you tried using an Ajax form? (Ajax.BeginForm(...))

If you bring in a partial ajax form this should have all the information needed for validation. Once the form is submitted you can specify a javascript function to run.

Answer 3

Ok finally I got it. The problem was there, no matter if I hi jacked the form or if I used Ajax.BeginForm(...), no difference there. And it always worked if I didn't loaded the partial dynamically.

The solution?

Add jquery.validate.unobtrusive.min.js to the partial view. This might be a newbie mistake, adding it only to the parent view or a master page, but if this helps someone I'll gladly admit this mistake of mine :) It's this js file that makes the client validation work and it must of course be called every time a partial (that has client validation in it) is loaded.