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


Published at

Tags: jQuery,JavaScript

Luke Alderton

Comments

Mark Bell
This was extremely helpful, thanks!
13/03/2018
w
d
11/05/2018
jimbo
perfect!
13/06/2018
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
Tags
Latest Comments
By Ecake68 on MVC forms in Umbraco
16 Dec 2018, 16:11 PM
By Wowob43 on Restrict Umbraco Back Office by IP
16 Dec 2018, 10:21 AM
By Rosax69 on How does DNS work? For dummies!
15 Dec 2018, 16:44 PM
By Aroli61 on Using SQL DataTables to speed up database performance
15 Dec 2018, 09:02 AM
By Xasus39 on MVC forms in Umbraco
14 Dec 2018, 20:04 PM
By Shane on Xamarin Forms multiple instances of same app open
14 Dec 2018, 05:33 AM
By Apabu19 on Displaying text on a 16x2 LCD screen with a Raspberry Pi
13 Dec 2018, 18:26 PM
By Anuri66 on Using SQL DataTables to speed up database performance
13 Dec 2018, 13:52 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development