Question

What are the complete set of Steps Required for client-side unobtrusive validation to work for dynamically inserted form fields?

Relevant SO posts

ASP.NET MVC 3 unobtrusive client-side validation with dynamic content – He needed the unobtrusive validation attributes to show up in the generated HTML and did so by calling BeginForm

ASP.Net MVC 3 validation on AjaxForm – The asker was using Ajax.BeginForm which uses MicrosoftAjax instead of JQuery.validation.

PartialView and unobtrusive client validation not working – He had the problem with unobtrusive validation attributes not showing up and overrode ViewContext.FormContext as a workaround.

ASP.NET MVC 3: Generate unobtrusive validation when BeginForm is on the layout – Workaround for unobtrusive validation attributes not showing up in HTML

Relevant Links

Brad Wilson’s Unobtrusive Client Validation in ASP.NET MVC 3

The Complete Guide To Validation In ASP.NET MVC 3 – Part 1

The Complete Guide To Validation In ASP.NET MVC 3 – Part 2

Unobtrusive Client-side Validation with Dynamic Contents in ASP.NET MVC 3

Answer 1

At this point I believe the following is a complete set of requirements:

1. Create a form with Html.BeginForm
2. Turn on ClientValidationEnabled
3. Turn on UnobtrusiveJavaScriptEnabled
4. Set appropriate validation attributes on the model’s properties (not fields)
5. If the Html Helpers being used to create the form elements are not on the same form as the Html.BeginForm call, use a relevant workaround (see workaround 1 and workaround 2)
6. Include jquery, jquery.validate.js, and jquery.validate.unobtrusive.js files, in that order
7. Verify that the unobtrusive validation attributes are present in the HTML
8. If using custom validators:
   • ensure that they are added to jQuery.validator.unobtrusive.adapters
   • ensure that they are added to the jQuery validation plugin by calling jQuery.validator.addMethod.
   • ensure that the above happen before $(document).ready() as at that point it’s too late
9. Call jQuery.validator.unobtrusive.parse or jQuery.validator.unobtrusive.parseElement on elements added dynamically after the initial page load.