Question

I have a form in a partial view with a required field. I try to submit the form and get a validation error which is the expected behaviour. Now I fill out the required field and submit the form and my controllerAction replaces the partial view.

Now I empty the required field again and try to submit again – and the form is submitted. I get validation error tough but my page is sending a POST-Request.

What’s happenig here?

EDIT

Zruty gave the correct answer, I updated my ajaxSetup:

$j.ajaxSetup({
    statusCode: {
        200: function (data, textStatus, jqXHR) {
            $.validator.unobtrusive.parse(document);
        }
    }
});

Answer 1

The ‘unobtrusive JavaScript validation’ feature of MVC3 is powered by jquery.validation plugin.

Once the page is loaded, its DOM is parsed completely to account for all the validation attributes.

Obviously, when you expand the DOM afterwards, the validation plugin will not automagically account for those added rules.

You can force a re-analyzing of your DOM document by calling $.validator.unobtrusive.parse(document) after you have finished modifying the DOM:

    $.get("somedata.html", {}, function (data) {
        $("div.ajax-loaded").html(data);
        $.validator.unobtrusive.parse(document);
    }, "html");

EDIT: I never used AjaxHelper for my AJAX communication, but it appears that you can easily slip your after-request processing into AjaxOptions.OnSuccess parameter:

@using(Ajax.BeginForm("Action", 
    new AjaxOptions { OnSuccess = "successCallback" }))
{
    ...
}
<script type="text/javascript">
    function successCallback(ajaxContext){
        $.validator.unobtrusive.parse(document);
    }
</script>