ICodeFactory Labs

Dynamically adding ASP.NET validators and ASP.NET ajax validation callout extenders using Javascript

by Lacio 13. May 2010 01:33

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;
                cellName.appendChild(elName);

                // 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 = "";
                elNameValidator.evaluationfunction =
                                              RequiredFieldValidatorEvaluateIsValid;

 

The next step is to add the validator to the array of existing validators:

 

                // Push the new validator inside the page validators array:
                Page_Validators.push(elNameValidator);

 

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:
                $create(AjaxControlToolkit.ValidatorCalloutBehavior, {
                    "closeImageUrl": "/image/close.png",
                    "highlightCssClass": "highlight",
                    "id": elNameValidator.id + "ValidatorCalloutExtender",
                    "warningIconImageUrl": "../images/attention.png"
                }, null, null, $get(elNameValidator.id));

 

The last step that needs to be taken and is essential for this to work is to add some dummy validator and dummy validator callout extender to the page. This is needed, as otherwise the necessary javascript libraries will not be included on the page (either this, or including the libraries by hand, whichever solution you prefer).

 

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.

 

As you can see, it is really easy to create the validation and add the validator callout extenders, with just a bit of knowledge in javascript. I recommend experimenting with different types of validators, as they all attach different attributes to the DOM element. If you have any questions or suggestions, feel free to post them to the comments section, I will try my best to help.

Currently rated 1.5 by 92 people

  • Currently 1.532607/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5

Tags: , , , ,

.NET | ASP.NET | ICF.Labs

Comments

Add comment


(Will show your Gravatar icon)  

  Country flag


  • Comment
  • Preview
Loading




Contact

Development and Sales
ICodeFactory d.o.o.
Trg Marije Trandafil 24/2
21000 Novi Sad
Serbia, Europe
Phone: +381 (0)21 41 77 08
info[at]icodefactory[dot]com

Headquarter
T.C. Bagljaš, Lok. 11
23000 Zrenjanin
Serbia, Europe

Working hours
Monday - Friday
8am - 4pm (GMT+1)