Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ASP.NET MVC 3: Required steps for unobtrusive client-side validation of dynamic/AJAX content

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

like image 577
Kaleb Pederson Avatar asked Dec 16 '11 17:12

Kaleb Pederson


People also ask

What is unobtrusive validation in ASP NET MVC?

Unobtrusive Validation allows us to take the already-existing validation attributes and use them client-side to make our user experience that much nicer. The Unobtrusive script files are included automatically with new MVC projects in Visual Studio, but if you don't have them you can get them from NuGet.

What is unobtrusive validation in asp net?

Unobtrusive validation makes use of jQuery library and data-* attributes of HTML5 to validate data entered in the web form controls. Unobtrusive validations can be enabled in the web. config file, Global. asax or individual Web Form code-behind.

What is validator unobtrusive parse?

validator. unobtrusive. parse(selector) method to force parsing. This method parses all the HTML elements in the specified selector and looks for input elements decorated with the [data-val=true] attribute value and enables validation according to the data-val-* attribute values.

How does jQuery unobtrusive validation work?

Unobtrusive Validation means without writing a lot of validation code, you can perform simple client-side validation by adding the suitable attributes and including the suitable script files. data-val-required=”This is required.”


1 Answers

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.
like image 170
Kaleb Pederson Avatar answered Sep 19 '22 15:09

Kaleb Pederson