ASP.NET MVC jQuery validation fails if partial loading is done via ajax

Question

I am using the jquery validation parameter to perform client-side validation on a partial view. A partial view is loaded via ajax into a modal dialog using url (almost like Html.RenderAction).

However, when loading a partial view, validation metadata is not displayed on the page. You will usually see something like this:

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

My question is very similar to this ASP.NET MVC 2, loading a partial view using jQuery - there is no client-side validation , but I do not want to use Microsoft Validation, as I am familiar with jQuery.validate.

Answer 1

If I understood your problem correctly, this could help.

In the example below, I use Ajax.BeginForm to update the div (id = "div_to_update"), but this could be another method.

It is important that OnSuccess runs the method below. This will update the contents of the div and does all javascripts, including jquery validation. I originally found this solution on the 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 see this link: Running dynamically loaded JavaScript
It contains fixes that suggest javascript for dynamically loaded (via AJAX) partial views.

Answer 3

what your problem understands is that when the page is partially refreshed, the corresponding DOM elements are reinserted, that is, they are new and they have the required $ .validate initialization.

I thought you could use $ .live / $ in some way. livequery to bind $ .validate objects to these fields, so after each partial page refresh, jquery code will reinitialize $ .validate for these fields. Perhaps you could use the css class to refer to these DOM elements.

What I'm suggesting is late binding and uses the newer events related to DOM insertion.

Hope this helps!

Answer 4

I had similar problems loading javascript when dynamically placing content in the DOM. How do you embed content in the DOM? There are some methods in jQuery that highlight javascript when inserting a try using this:

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

Hope this helps you!

Answer 5

I may be confused, but you can just call confirmation on sending and not send if it fails?

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

Answer 6

I had the same problem and solved it.

Open 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 $ (document) .ready () and replace it with

 $(document).ready(__MVC_ApplyClientValidationMetadata); 

Now just do the following

If you use html (), just call __MVC_ApplyClientValidationMetadata after loading the html into the element.

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

If you use load (), another problem arises. It removes all script tags. So you need 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 more thing. Make sure the forms you upload using ajax have a unique identifier. By default, all forms receive a form identifier.

Answer 7

Part of the problem is that the script included in the response is not executing. In my case, I had to work with a solution based on a jcruz solution that selects a script from a specific 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 that the Microsoft check is initialized after it is loaded by calling Sys.Mvc.FormContext._Application_Load. Therefore, after executing the necessary script containing the specifications of the validation field, I call the same function that is called when the document is loaded:

 Sys.Mvc.FormContext._Application_Load(); 

hope this helps. Any comments would be greatly appreciated.