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.