如果通过ajax加载部分，则不会触发ASP.NET MVC Jquery验证

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 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

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 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 2

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 3

what understand of your problem is that on partial update of the page the corresponding DOM elements are being re-inserted ie 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 4

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 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.

Answer 7

Part of the problem is the fact that the script included in the response is not executed. In my case I had to work with a solution based on jcruz' solution, which selects the script from the certain ajax form:

var scripts = $('div#id_of_ajax_form>script');
for (var i = 0; i < scripts.length; i++) {
    //executes javascript
    $.globalEval(scripts[i].text);
}

The second part of the problem is the fact that the microsoft validation is being initialized after the is loaded by a call to Sys.Mvc.FormContext._Application_Load. So after executing the needed script, containing the validation field specifications, I call the same function that is being called on document load:

Sys.Mvc.FormContext._Application_Load();

hope this helps. Any comments would be appreciated very much.