ASP.NET MVC Jquery validation won't fire if partial is loaded via ajax

Question

I'm using the jquery validation option to perform client side validation on an partial view. The partial view is loaded via ajax into a modal dialog using the url (almost like Html.RenderAction).

However, when the partial view is loaded the validation metadata is not being output to the page.Normally you would see something like this:

//<![CDATA[
3if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
4window.mvcClientValidationMetadata.push({"Fields":[],"FormId":"form0","ReplaceValidationSummary":false});
5//]]> 

My question is very similiar to this one http://stackoverflow.com/questions/2652586/asp-net-mvc-2-loading-partial-view-using-jquery-no-client-side-validation but I don't want to have to use Microsoft validation as I am familiar with jQuery.validate.

Answer 1

Hi William!

Please check out this link : Executing Dynamically Loaded JavaScript
It contain fixes which suppose to execute javascript on the dynamically loaded (thru AJAX) partial views.

Answer 2

Hi William, what understand of your problem is that on partial update of the page the corresponding DOM elements are being re-inserted i.e. they are new and don have the required $.validate initialization.

I was thinking you could somehow use $.live/$.livequery to bind $.validate objects to those fields so after every partial page update the jquery code would re-initialize $.validate on to those fields. May be you could use a css class to mark those DOM elements.

What I am suggesting is kind of late binding and use the newer events relating to DOM insertion.

Hope this helps!!

Answer 3

Hey William,

I've had similar problems loading javascript when I put content dinamically in the DOM. How are you inserting the content into the DOM? There are some methods in jQuery that strip out the javascript when inserting try using this:

$("#mydiv").html(newContent);

Hope this helps you!

Answer 4

If I understood your problem correctly then this might help.

In the example below I am using Ajax.BeginForm to update div(id="div_to_update"), but it could be other method also.

Important thing is OnSuccess which launches method below. That will update div content and executes all javascripts including your jquery validation. Originally I found this solution from Telerik forums.

<div id="div_to_update">
<% using (Ajax.BeginForm("Translations", new { Model.Id }, new AjaxOptions { OnSuccess = "updatePlaceholder", UpdateTargetId = "div_to_update", InsertionMode = InsertionMode.Replace }, new { id = "translationAjaxForm" }))
<% } %>

<script type="text/javascript">
    function updatePlaceholder(context) {
        // the HTML output of the partial view
        var html = context.get_data();

        // the DOM element representing the placeholder
        var placeholder = context.get_updateTarget();

        // use jQuery to update the placeholder. It will execute any JavaScript statements
        $(placeholder).html(html);

        // return false to prevent the automatic update of the placeholder
        return false;
    }
</script>
</div>

Answer 5

Perhaps I am confused but could you just call the validate on the submit and not submit if fails?

$(function() {
    $("form:first").validate( { .. options for validator .. });

    $("submit").click(function() {
        if(!$("form:first").valid()){ 
             return false;
        }
        // Submit form here
    });

});

Answer 6

I had this same issue and this is how I solved it.

Open up MicrosoftMvcJQueryValidation.js and make the following changes.

Add this function

function __MVC_ApplyClientValidationMetadata() {
   var allFormOptions = window.mvcClientValidationMetadata;
   if (allFormOptions) {
      while (allFormOptions.length > 0) {
         var thisFormOptions = allFormOptions.pop();
         __MVC_EnableClientValidation(thisFormOptions);
       }
   }
}

Find the $(document).ready() and replace it with

$(document).ready(__MVC_ApplyClientValidationMetadata); 

Now just do the following

If you use html() then just call __MVC_ApplyClientValidationMetadata after you load the html into the element.

$("#someDiv").html(responseHtml);
__MVC_ApplyClientValidationMetadata();

If you use load() then you have another problem. It's strips out all script tags. So you have to do something like the following.

$("#someDiv").load("/a/partialview/request" , function(response){
   var scripts = $(response).filter("script");
   for (var i = 0; i < scripts.length; i++) {
      //executes javascript
      $.globalEval(scripts[i].text);
   }
   __MVC_ApplyClientValidationMetadata();
});

One thing more thing. Make sure the forms you load using ajax have a unique id. By default, all forms get an id of form0.