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 ?

I had also the same problem, but in mvc 2. I go through the step by step as : weblogs.asp.net/imranbaloch/archive/2010/07/11/… This might also help you. weblogs.asp.net/imranbaloch/archive/2011/03/05/… Hope this help :) — Naresh Parmar
– Naresh Parmar, Commented Jun 3, 2013 at 9:38
Note, the unobtrusive.parse function takes a selector as an argument, not an element. — Fred
– Fred, Commented Apr 12, 2016 at 13:17

KyleMit · Accepted Answer · 2016-12-09 14:56:49Z

251

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

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

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.

edited Dec 9, 2016 at 14:56

KyleMit♦

31.4k74 gold badges517 silver badges712 bronze badges

answered Feb 20, 2013 at 14:38

Nadeem Khedr

5,3233 gold badges32 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

cezarypiatek Over a year ago

I was afraid that I should invite it by myself. Script from that page works like a charm.

Richard Housham Over a year ago

Code, works great - quick update (if I may) 1. I'm using knockout and getting the names of the fields well it looks like a problem so. $.validator.unobtrusive.parseDynamicContent('form'); (to get all the fields), at the end when submitting. 2. This is nice johnnyreilly.github.io/jQuery.Validation.Unobtrusive.Native/… to give you a way to name the fields (which seems to be required? I'm using jquery unbtrusive bootstrap ontop of the other 2 so my circumstances are probably different)

KyleMit Over a year ago

Just a note that any form specific settings you have applied to $("form").data("validator").settings will be removed by $(formSelector).removeData("validator") and replaced with the defaults from $.validator.defaults when reparsing the form. This is a great way to include dynamic fields, but make sure to repeat any custom initialization code on each fresh parse.

AlfaTeK Over a year ago

Using solution 1) causes form and form elements to have duplicated event listeners (like onKeypUp) if you try to reset it and parse it multiple times (like in my case where it's dynamic content added/removed via JS). Any tips to unbind all events and avoid this repetition? on jquery.validate 1.10, newer versions have a destroy method

Mark Jerzykowski · Accepted Answer · 2013-06-06 14:55:04Z

22

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.

answered Jun 6, 2013 at 14:55

Mark Jerzykowski

1,05211 silver badges16 bronze badges

2 Comments

mmssaann Over a year ago

hi, im facing the same issue. im showing my dynamic view in a pop up (jquery dialog). the unobstrusive validations are not working. where do I call $(form).valid() in my dynamic view or some where else?

Jennifer Michelle Over a year ago

I was always preventing the form from submitting by returning false inside $(form).submit because I was doing an AJAX submit, but then I needed a way to not call the AJAX submit when validation failed. $(form).valid() is the answer! Thank you!

Rabadash8820 · Accepted Answer · 2017-11-15 19:52:37Z

7

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.

answered Nov 15, 2017 at 19:52

Rabadash8820

2,5744 gold badges34 silver badges54 bronze badges

Comments

Djobs · Accepted Answer · 2015-01-18 10:52:44Z

6

add this to your _Layout.cshtml

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

answered Jan 18, 2015 at 10:52

Djobs

771 silver badge3 bronze badges

1 Comment

Liam Over a year ago

This is particularly inefficient.

Omid.Hanjani · Accepted Answer · 2013-12-06 20:41:34Z

4

test this:

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

answered Dec 6, 2013 at 20:41

Omid.Hanjani

1,5222 gold badges22 silver badges29 bronze badges

Comments

Jay · Accepted Answer · 2018-04-17 14:43:14Z

4

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.

answered Apr 17, 2018 at 14:43

Jay

1,0396 gold badges23 silver badges43 bronze badges

1 Comment

Pradip Rupareliya Over a year ago

This one is worked to me. I was finding a solution from last many days, It workes in asp.net core 2. Thanks.

mohammad miraali · Accepted Answer · 2018-09-09 05:12:04Z

0

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>

;)

answered Sep 9, 2018 at 5:12

mohammad miraali

116 bronze badges

1 Comment

sergiol Over a year ago

Does nothing...

Super Kai - Kazuya Ito · Accepted Answer · 2023-06-14 01:34:29Z

0

For me, this worked

resetUnobtrusiveValidation: function (form) {
    form.removeData('validator');
    form.removeData('unobtrusiveValidation');
    $.validator.unobtrusive.parse(form);
}

edited Jun 14, 2023 at 1:34

Super Kai - Kazuya Ito

42.8k23 gold badges258 silver badges257 bronze badges

answered Jun 12, 2023 at 16:34

user3259768

573 bronze badges

Comments

Karan Baghel · Accepted Answer · 2024-10-31 13:44:07Z

0

To reset form validation for dynamic fields added after the form initially loads, you need to remove and reapply unobtrusive validation. This code removes the validation data from the form, then reapplies it so that new fields are validated correctly.

        let $form = $("#funding-information");
        $form.removeData('validator');
        $form.removeData('unobtrusiveValidation');
        $.validator.unobtrusive.parse('#funding-information');

        if (!$form.valid()) {
            return false;
        }

edited Oct 31, 2024 at 13:44

answered Oct 31, 2024 at 12:03

Karan Baghel

13 bronze badges

Collectives™ on Stack Overflow

unobtrusive validation not working with dynamic content

9 Answers 9

4 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

4 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related