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 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
By jimbo on JQuery Unobtrusive Validation for dynamically created elements
13 Jun 2018, 17:13 PM
By ScottKem on MVC forms in Umbraco
8 Jun 2018, 10:29 AM
By Alaa on java.lang.UnsatisfiedLinkError: no rxtxSerial in java.library.path
3 Jun 2018, 20:16 PM
By Robertfrold on MVC forms in Umbraco
3 Jun 2018, 12:11 PM
By Kiran Lad on How to add a Xamarin Forms Loading Screen/Overlay
29 May 2018, 06:39 AM
By jake on Xamarin forms - Stop/Cancel back button event
26 May 2018, 15:24 PM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development