Applying unobtrusive jquery validation to dynamic content in ASP.Net MVC

The new unobtrusive validation features of ASP.net MVC are great, but I was surprised to find that once the validators have been applied for a document, validators as a result of dynamic content will not be applied, even if you call $.validator.unobstrusive.parse

The Microsoft jquery.validate.unobtrusive library calls the jquery .validate method on the relevant form. Inside this method, it does nothing if the form already has a validator attached, so any parsed rules will be ignored.

validate: function( options ) {
......	
// check if a validator for this form was already created
		
var validator = $.data(this[0], 'validator');
		
if ( validator ) {
			
  return validator;
		
}

......

To get around this, I’ve created a library extension for jquery.validate.unobtrusive.
/// <reference path="jquery-1.4.4.js" />
/// <reference path="jquery.validate.js" />
/// <reference path="jquery.validate.unobtrusive.js" />

(function ($) {
  $.validator.unobtrusive.parseDynamicContent = function (selector) {
    //use the normal unobstrusive.parse method
    $.validator.unobtrusive.parse(selector);

    //get the relevant form
    var form = $(selector).first().closest('form');
  
    //get the collections of unobstrusive validators, and jquery validators
    //and compare the two
    var unobtrusiveValidation = form.data('unobtrusiveValidation');
    var validator = form.validate();

    $.each(unobtrusiveValidation.options.rules, function (elname, elrules) {
      if (validator.settings.rules[elname] == undefined) {
        var args = {};
        $.extend(args, elrules);
        args.messages = unobtrusiveValidation.options.messages[elname];
        //edit:use quoted strings for the name selector
        $("[name='" + elname + "']").rules("add", args);
      } else {
        $.each(elrules, function (rulename, data) {
          if (validator.settings.rules[elname][rulename] == undefined) {
            var args = {};
            args[rulename] = data;
            args.messages = unobtrusiveValidation.options.messages[elname][rulename];
            //edit:use quoted strings for the name selector
            $("[name='" + elname + "']").rules("add", args);
          }
        });
      }
    });
  }
})($);

To use this extension, place it in a file loaded subsequent to jquery.validate.unobtrusive.js. Calling the method is simply:

var html = "<input data-val='true' "+
           "data-val-required='This field is required' " +
           "name='inputFieldName' id='inputFieldId' type='text'/>;
$("form").append(html);

$.validator.unobtrusive.parseDynamicContent('form input:last');


Conclusion
This post has provided a technique for enabling the consistent use of unobtrusive data-val-* style validators to dynamically created content.