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.

// Add validation again.

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.


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

Published at

Tags: jQuery,JavaScript

Luke Alderton


Mark Bell
This was extremely helpful, thanks!
Post a comment
Sit tight...
We're adding your comment.
Thank you.
Your comment has been added.
There's been a problem.
Please try again later.
Share with
Latest Comments
By Richardcax on MVC forms in Umbraco
16 Aug 2018, 00:30 AM
By Cary on MVC forms in Umbraco
12 Aug 2018, 02:58 AM
By Naufil on How to open a modal window for a custom datatype in the Umbraco back office
30 Jul 2018, 12:40 PM
By Trevor on Replacing the Xamarin Header/Navigation bar with a custom view/template
19 Jul 2018, 18:36 PM
By Luke on Setting up tables in SQLite with a primary key on a Xamarin Forms app
11 Jul 2018, 09:18 AM
By Travis on Setting up tables in SQLite with a primary key on a Xamarin Forms app
7 Jul 2018, 15:44 PM
By Luke on Auto/Custom height on Xamarin Forms WebView for Android and iOS
15 Jun 2018, 09:43 AM
By vikki on Auto/Custom height on Xamarin Forms WebView for Android and iOS
14 Jun 2018, 13:35 PM
App Development
Game Development
Web Development