MVC 4 client side validation not working for the form which is loaded using Ajax

Question

I have an Admin page in which the user clicks on links and the corresponding PartialView, containing a web form is then loaded inside a particular div on the Admin page using Ajax.

All of the

"~/Scripts/jquery-2.0.3.js",
"~/Scripts/jquery.unobtrusive-ajax.js",
"~/Scripts/jquery.validate.js",
"~/Scripts/jquery.validate.unobtrusive.js"

are referenced within the Admin page and when the PartialView is loaded, the jQuery client side validation won't work.

but when I reference those scripts within the PartialView, everything works just fine but I don't intend to do this for each PartialView because they are numerous and each time each one loads, at least two of those .js files must be requested from the server again.

Is there any way I can have those scripts inside my parent (Admin) page without this issue ?

Hilel

The jQuery validation probably needs to be made aware of the new markup that was loaded from the Partial View. I've had this issue with other jQuery plugins that need to be "re-applied" to new markup that was loaded via ajax. – Tribrach

Answer 1

You need this on each one of your partial views:

$(document).ready(function () {

    $.validator.unobtrusive.parse("#YourFormID");

});

Basically the validation is not bound on the dynamically rendered form...

Agglutination

Could you elaborate exactly where and how to place this in the partial view? I tried putting it in a script tag below the rest of the code and it does not work. The MVC script section is also not supported, so I had to place this in the main view, which I was not happy about since now the view needs to know the name of the form inside the partial. – Resurgent

@Resurgent This should work without any issues at the bottom of the partial view inside the script tags. Are you including all the necessary javascript libraries? – Agglutination

That was the first thing I tried, and it wasn't working. When I place the script in the containing view it works flawlessly. The only peculiar thing I'm seeing is that my partial view creates a form with the Ajax.BeginForm method. I placed the script outside of it, at the bottom of the file. – Resurgent

@Resurgent I'm not sure without seeing your code. The fact that you are using Ajax.BeginForm should make no difference. I use ajax forms regularly and it works fine with them too... – Agglutination

I know we avoid comments like +1 or thanks but this really saved the day for me. – Nitpicking

Answer 2

Basically the validator parses the elements on document ready. You can call it on your own if you like, however someone has already posted a question about this. and the accepted answer probably still works. One of the answers has a blog post link for further reading if you like.

client side validation with dynamically added field

Twobit