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
jimbo
perfect!
13/06/2018
esrgr
srtgs
11/06/2019
tiky
I'm having a kid!
16/08/2019
للل
9-9-98-9-
31/08/2019
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 Aquif on Xamarin Forms - Working with threads
9 Jul 2020, 13:50 PM
By Chris on Disabling XAML Hot Reload
10 Jun 2020, 15:23 PM
By Ben on Raspberry Pi - Running Java app on Raspbian
24 May 2020, 09:01 AM
By BP on Disabling XAML Hot Reload
14 May 2020, 21:59 PM
By Andy on Xamarin Forms - Working with threads
12 May 2020, 09:16 AM
By mitchell on Xamarin forms - Stop/Cancel back button event
29 Apr 2020, 18:16 PM
By Paolo on Raspberry Pi - Running Java app on Raspbian
19 Apr 2020, 11:04 AM
By Alexander Gontar on Xamarin Forms - Working with threads
13 Mar 2020, 07:10 AM
Categories
App Development
Event
Game Development
Mapping
Modelling
Programming
Review
Robotics
Tutorial
Web Development