unobtrusive validation not working with dynamic content

Question

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

I've been spending days trying to get this code to work with no luck.

Here's the View:

@model MvcApplication2.Models.test

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

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

The Model:

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

The Controller:

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

and finally, the 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;
    }
});

The validation does not work. Even if I don't fill any information in the texbox, the submit event shows the alert ('valid').

However, if instead of loading dynamically the view, I use @Html.Partial("test", Model) to render the partial View in the main View (and I don't do the AJAX call), then the validation works just fine.

This is probably because if I load the content dynamically, the controls don't exist in the DOM yet. But I do a call to $.validator.unobtrusive.parse($("#res")); which should be enough to let the validator about the newly loaded controls...

Can anyone help ?

Answer 1

If you try to parse a form that is already parsed it won't update

What you could do when you add dynamic element to the form is either

1. You could remove the form's validation and re validate it like this:

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

2. Access the form's unobtrusiveValidation data using the jquery data method:

   $(form).data('unobtrusiveValidation')
   

   then access the rules collection and add the new elements attributes (which is somewhat complicated).

You can also check out this article on Applying unobtrusive jquery validation to dynamic content in ASP.Net MVC for a plugin used for adding dynamic elements to a form. This plugin uses the 2nd solution.

Answer 2

As an addition to Nadeem Khedr's answer....

If you've loaded a form in to your DOM dynamically and then call

jQuery.validator.unobtrusive.parse(form); 

(with the extra bits mentioned) and are then going to submit that form using ajax remember to call

$(form).valid()

which returns true or false (and runs the actual validation) before you submit your 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

test this:

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

Answer 5

Surprisingly, when I viewed this question, the official ASP.NET docs still did not have any info about the unobtrusive parse() method or how to use it with dynamic content. I took the liberty of creating an issue at the docs repo (referencing @Nadeem's original answer) and submitting a pull request to fix it. This information is now visible in the client side validation section of the model validation topic.

Answer 6

I got struck in the same problem and nothing worked except this:

$(document).ready(function () { 
    rebindvalidators();
});

function rebindvalidators() {
    var $form = $("#id-of-form");
    $form.unbind();
    $form.data("validator", null);
    $.validator.unobtrusive.parse($form);
    $form.validate($form.data("unobtrusiveValidation").options);
}

and add

// Check if the form is valid
var $form = $(this.form);
if (!$form.valid())
    return;

where you are trying to save the form.

I was saving the form through Ajax call.

Hope this will help someone.

Answer 7

just copy this code again in end of modal code

    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>

;)