Unobtrusive validation does not work with dynamic content

Question

I'm having trouble trying to get an unobtrusive jquery validation to work with a partial view that is dynamically loaded using an AJAX call.

I spent days trying to get this code to work without any luck.

Here View:

@model MvcApplication2.Models.test @using (Html.BeginForm()) { @Html.ValidationSummary(true); <div id="res"></div> <input id="submit" type="submit" value="submit" /> } 

Partial view:

 @model MvcApplication2.Models.test @Html.TextAreaFor(m => m.MyProperty); @Html.ValidationMessageFor(m => m.MyProperty); <script type="text/javascript" > $.validator.unobtrusive.parse(document); </script> 

Model:

  public class test { [Required(ErrorMessage= "required field")] public int MyProperty { get; set; } } 

Controller:

  public ActionResult GetView() { return PartialView("Test"); } 

and finally javascript:

 $(doument).ready(function () { $.ajax({ url: '/test/getview', success: function (res) { $("#res").html(res); $.validator.unobtrusive.parse($("#res")); } }); $("#submit").click(function () { if ($("form").valid()) { alert('valid'); return true; } else { alert('not valid'); return false; } }); 

Validation does not work. Even if I don't fill in any information in texbox, the submit event shows a warning ("valid").

However, if instead of dynamically presenting the view, I use @Html.Partial("test", Model) to render the partial view in the main view (and I do not make an AJAX call), then the check works just fine.

This is probably due to the fact that if I load content dynamically, the controls do not yet exist in the DOM. But I'm calling $.validator.unobtrusive.parse($("#res")); which should be sufficient to allow the validator about recently loaded controls ...

Can anyone help?

Answer 1

If you try to analyze a form that is already parsed, it will not update

What you can do by adding a dynamic element to the form, or

• You can remove form validation and validate it as follows:

   var form = $(formSelector) .removeData("validator") /* added by the raw jquery.validate plugin */ .removeData("unobtrusiveValidation"); /* added by the jquery unobtrusive plugin*/ $.validator.unobtrusive.parse(form); 

• Access the data of the unobtrusiveValidation form using the jquery data method:

   $(form).data('unobtrusiveValidation') 

  then access to the rule collection and adding new element attributes (which is somewhat complicated).

You can also check this article on Applying Unobtrusive jquery Validation for Dynamic Content in ASP.Net MVC for a plugin used to add dynamic elements to a form. This plugin uses the second solution.

Answer 2

As a complement to Nadema Khedra’s answer ....

If you loaded the form dynamically into your DOM, then call

 jQuery.validator.unobtrusive.parse(form); 

(with extra bits indicated) and then submit this form using ajax, don't forget to call

 $(form).valid() 

which returns true or false (and performs the actual check) before submitting the form.

Answer 3

add this to your _Layout.cshtml

  $(function () { //parsing the unobtrusive attributes when we get content via ajax $(document).ajaxComplete(function () { $.validator.unobtrusive.parse(document); }); }); 

Answer 4

check this:

 if ($.validator.unobtrusive != undefined) { $.validator.unobtrusive.parse("form"); } 

Answer 5

Surprisingly, when I looked at this issue, the official ASP.NET docs still had no information about the unobtrusive parse() method or how to use it with dynamic content. I took the liberty of creating an issue in the docs repository (referring to the original @Nadeem answer) and sending a pull request to fix it. This information is now displayed in the client-side validation section of the model validation topic.