JQuery Unobtrusive Validation for dynamically created elements

The problem

A few months ago I built a form for a client that had a huge amount of input elements dynamically added to the dom depending on what the end user had chosen, this was great and worked until the client asked, 'Hey, can we make them mandatory?', Naturally I said yes and set myself the task of finding out how I could make my C# MVC Form setup validate these inputs, the trick was in basic validation server side that either said 'Data valid' or 'Data invalid' and the true niceties came into it using JavaScript. jQuery to be more specific. I'd already been using the unobtrusive validation js packages so I was familiar with what it did, the issue was with making it do something different to the norm. As it turns out, it's easier than it seems.

The solution

Since I had jQuery creating elements on the fly, I couldn't just apply attributes to my model and have the web server sort the rest, I had to make the jQuery Validate plugin understand that I wanted these elements validated and so I found the following.

Make sure you have the name, data-val and data-val-required attributes set:

<input type="text" name="contents_1" class="form-control" placeholder="Contents" data-val="true" data-val-required="Please enter the value for pack 1." />

Just remember that you MUST have all the attributes in bold above applied to all elements that you want to validate. Obviously updating the name and data-val-required text for each element.

My actual JavaScript looked something like this:

var elem = $("<input type=\"text\" name=\"contents_" + rowid + "\" class=\"form-control\" placeholder=\"Contents\" data-val=\"true\" data-val-required=\"Please enter the value for pack " + rowid + ".\" />");

Then it's just a case of removing validation from the form and adding it again:

// Remove validation.
$("form").removeData("validator").removeData("unobtrusiveValidation");

// Add validation again.
$.validator.unobtrusive.parse("form");

Done, the form will now validate all elements. Don't forget that you'll need run the above JavaScript every time you add a new set of elements to the form.

Good luck.

Sources:

Find out more about the DOM here: https://www.w3.org/TR/DOM-Level-2-Core/introduction.html

Useful Stack Overlow article on just this: http://stackoverflow.com/questions/9386971/adding-jquery-validator-rules-to-dynamically-created-elements-in-asp

Get unobtrusive validation here: https://github.com/aspnet/jquery-validation-unobtrusive