Creating A Designer Enabled Custom Validator Control Pt. II Client Side: ASP Alliance

Print Add To Favorites Email To Friend Rate This Article
Creating A Designer Enabled Custom Validator Control Pt. II Client Side

page 1 of 1

Published: 11 Feb 2004

Unedited - Community Contributed

Abstract
In PART I, we discussed how to implement server-side validation in ASP.NET. Now we will conclude our discussion with how to implement validation for the client side.

by King & Keith Wells
Feedback

Average Rating:

Views (Total / Last 10 Days): 7059/ 16

CLIENT-SIDE VALIDATION

PART II: CLIENT-SIDE VALIDATION

[SAMPLE CODE]

By: King S. Wells Jr. & Keith A. Wells

In PART I, we discussed how to implement server-side validation. Now we will
conclude our discussion with how to implement validation for the client side.

ADDING CLIENT-SIDE VALIDATION

The OnPreRender method is used to load code that your control needs before the control begins rendering to the browser. In our case, we need to load the client-side javascript code that the control will need to use to execute client-side validation. You will need to override the parent class’s (BaseValidator) OnPreRender method and implement your own logic to set the appropriate attributes and to render the necessary javascript code.

protected override void OnPreRender(System.EventArgs e)

{

base.OnPreRender(e);

//Create script if browser is uplevel one

strFunctionName = "DualValidator";

if(RenderUplevel)

{

In order to give your javascript function the ability to see the new properties, PrimaryControl,FirstControlToValidate and SecondControlToValidate, it is important to add these properties and their values to the validator control using the Add() method of the Attributes property (this.Attributes.Add). This will allow you to find this new element on the client-side using the getElementById() function in javascript.

E.g.

Javascript

primaryvalue = document.getElementById(val.PrimaryControl).value;

The javascript function used in this example is DualValidator(val).

This function receives the validator element with its associated attributes. What is of most importance to us are the attributes we recently added to the DualValidator class. Because we added these attributes to the DualValidator class earlier, we are now able to access these elements via javascript and obtain their values using the document.getElementById function.

//Add New Attributes

this.Attributes.Add("FirstControlToValidate",

NamingContainer.FindControl(FirstControlToValidate).ClientID);

this.Attributes.Add("SecondControlToValidate",

NamingContainer.FindControl(SecondControlToValidate).ClientID);

this.Attributes.Add("PrimaryControl",

NamingContainer.FindControl(PrimaryControl).ClientID);

StringBuilder sb=new StringBuilder();

sb.Append("<script language='javascript'>\r\n");

sb.Append("function " + strFunctionName + "(val)" );

sb.Append("\r\n");

sb.Append("{");

sb.Append("\r\n");

sb.Append("var primaryvalue; ");

sb.Append("\r\n");

sb.Append("var firstvalue; ");

sb.Append("\r\n");

sb.Append("var secondvalue; ");

sb.Append("\r\n");

sb.Append("primaryvalue =

ValidatorTrim(document.getElementById

(val.PrimaryControl).value);" );

sb.Append("\r\n");

sb.Append("firstvalue =

ValidatorTrim(document.getElementById

(val.FirstControlToValidate).value); " );

sb.Append("\r\n");

sb.Append("secondvalue =

ValidatorTrim(document.getElementById

(val.SecondControlToValidate).value); " );

sb.Append("\r\n");

sb.Append("if (!isEmpty(primaryvalue))");

sb.Append("\r\n");

sb.Append("{");

sb.Append("\r\n");

sb.Append("if ( ( isEmpty(firstvalue) ) && (

isEmpty(secondvalue) ) ) ");

sb.Append("\r\n");

sb.Append("{");

sb.Append("\r\n");

sb.Append("return false;");

sb.Append("\r\n");

sb.Append("}");

sb.Append("\r\n");

sb.Append("else if ( (!isEmpty(firstvalue) ) &&

(!isEmpty(secondvalue)) )" );

sb.Append("\r\n");

sb.Append("{");

sb.Append("\r\n");

sb.Append("return false;");

sb.Append("\r\n");

sb.Append("}");

sb.Append("\r\n");

sb.Append("else");

sb.Append("\r\n");

sb.Append("{");

sb.Append("\r\n");

sb.Append("return true;");

sb.Append("\r\n");

sb.Append("}");

sb.Append("\r\n");

sb.Append("}");

sb.Append("\r\n");

sb.Append("else");

sb.Append("\r\n");

sb.Append("{");

sb.Append("\r\n");

sb.Append("return true;");

sb.Append("\r\n");

sb.Append("}"); //if primaryvalue is not empty

sb.Append("\r\n");

sb.Append("}");//close function

sb.Append("\r\n");

//Create js isEmpty function

sb.Append("\r\n");

sb.Append("function isEmpty(aTextValue) {\r\n");

sb.Append("if (aTextValue.length==0) ");

sb.Append("{");

sb.Append("return true; \r\n");

sb.Append("} \r\n");

sb.Append("else { return false; } \r\n");

sb.Append("} \r\n");
sb.Append("</script> ");

The RegisterClientScriptBlock method allows you to set your javascript block at the top of the web page. This javascript code is rendered before the control is rendered to the page so that your control is able to access the necessary javascript code required for client-side validation.

//Output script into the page

Page.RegisterClientScriptBlock(strFunctionName,sb.ToString());

}//End If Statement RenderUpLevel

}//End OnPreRender override

The AddAttributesToRender method is overridden and used to add the evaluationfunction attribute to the DualValidator class. It also sets the value of this attribute equal to the name of the javascript function. In this case the value of the evaluationfunction attribute is equal to “DualValidator”.

E.g. " evaluationfunction="DualValidator"

You can see the above example for yourself by looking at the web page’s rendered html source. This is the ViewSource option in Internet Explorer.

protected override void AddAttributesToRender

(System.Web.UI.HtmlTextWriter writer)

{

base.AddAttributesToRender(writer);

if(RenderUplevel)

{

writer.AddAttribute("evaluationfunction",strFunctionName);

That is all there is to client-side validation.

Conclusion
Validation is very different than what was required in classical ASP, but now Microsoft has given you the power to write modularized, reusable code for your web applications, something we all can appreciate. With this example, you should be able to begin writing any type of validation control you require.

Happy Coding!

[SAMPLE CODE]

User Comments

Title: Ist Article
Name: kw
Date: 2006-06-22 9:49:46 AM
Comment:
http://aspalliance.com/370

Title: feed
Name: steve
Date: 2006-05-31 3:35:56 PM
Comment:
why don't you include a link to the first article???