Have you ever encountered a problem where you generated some content dynamically without the help of the server and server side code, but still needed to perform some basic validation on those contents?
That is exactly what this post deals with – validating content which is taken from dynamically generated input fields and adding the validation callout extender to it.
Since I did not find any suitable solutions online, I decided to do it myself. Turned out the solution is not so hard at all, and after a small analysis on the page source of pages with regular validation, I got an idea on how to do it.
The first thing to notice is that after the aspx page is parsed, the output of a validator control (of any type) is a SPAN tag. Sort of. The tag has some unconventional attributes, off course depending on the type of the validator used, but we will get to that later. Besides this, a reference to the span is kept in an array called Page_Validators, which is an array consisting of all the validators present on the page.
So let’s go step by step.
First create the span tag and place it in the DOM where you would place the validator control. Lets say we have an input field and we place a RequiredFieldValidator next to it, like in the code below:
// Get the table:
var tblEditItems = $get('tblEditItems');
// Get the number of rows currently in the table:
var rowsCount = tblEditItems.rows.length;
// Insert a new row at the end of the table:
var row = tblEditItems.insertRow(rowsCount);
// Insert a table cell:
var cellName = row.insertCell(0);
// Create an input field for the name:
var elName = document.createElement('input');
elName.type = 'text';
elName.size = 10;
elName.id = 'txtProductName' + globalControlCounter;
// Add the span that will represent the validotor
// (in this case the required field validator):
var elNameValidator = document.createElement('span');
elNameValidator.style.color = "Red";
elNameValidator.style.display = "none";
elNameValidator.id = elName.id + "Validator";
elNameValidator.controltovalidate = elName.id;
elNameValidator.errormessage = "<b>Field is incorrect</b>
<br /> <span>Name is a required field.</span>";
elNameValidator.validationGroup = "EditItems";
elNameValidator.initialvalue = "";
The next step is to add the validator to the array of existing validators:
// Push the new validator inside the page validators array:
After this is done, we can add the validator callout extender control, that will add some nice pop out effects displaying the error message itself:
// Now lets bind the validator callout that will popup
// up when the field is not valid:
"id": elNameValidator.id + "ValidatorCalloutExtender",
}, null, null, $get(elNameValidator.id));
Now, the triggering of the validators is up to you – I used triggering when the user clicks some submit action. Since the action does not cause a postback, I needed some client side validation check. If you have the same problem, you can check out this simple solution located on this post.