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!