Creating a Client-side Validator for the DropDownList

Dave Kehring — Tue, 23 Oct 2007 12:34:45 GMT

I like using Guids. Sure, they're a bit long and difficult to decipher in a database but they have their uses. I typically use them as the primary key for database tables. I often have the need to display a list of values from a database table in a DropDownList control on a WebForm. The value of each entry is the Guid while the text value comes from a description field in each record. When the user selects an item from the DropDownList, I retreive the Guid from the SelectedValue property which is typically used to set a field on a business object, thus creating a reference. Typically the first item in the DropDownList reads "--Select One--" or "-- None --", indicating the the user must select a value (this is represented by the value for Guid.Empty). Consequently the field is "required" - a user must select a value from the list. I do this because I don't want to presume a default value (such as the first item).

The problem them becomes how to validate the DropDownList on the client side such that if the user does not select an item other than the default "--Select One--" item a message is display.

I found a post that shows how to use the CustomValidator control to validate a DropDownList. The problem with this solution is that it does not take into account when a control is embedded within other controls that are tagged with the INamingContainer interface. This interface tells ASP.NET to automatically generate unique "id" attribute values on the ensuing HTML tags generated for a control. This unique id is prepended with the id of each parent control up to the root control. For example, a DropDownList embedded in a Panel control might have the id "ctl00$ddlMyDropDown". Therefore, in the solution mentioned above, we can't simply us "document.getElementById" Javascript function to locate the DropDownList control.

A better solution is to utilize the ControlToValidate property of the CustomValidator control. When this is set at design-time ASP.NET will generate Javascript code to add this value as an attribute of the validator control in the HTML DOM. For instance, looking at the source of the page I'm working on the following code is generated:

var ctl00_MainContent_CustomValidator1 = document.all ? document.all["ctl00_MainContent_CustomValidator1"] : document.getElementById("ctl00_MainContent_CustomValidator1");
ctl00_MainContent_CustomValidator1.controltovalidate = "ctl00_MainContent_ddlFeedbackType";

The property "controltovalidate" contains the fully-qualified unique id of the target control we're validating. We can use the "controltovalidate" property in our Javascript function that is used to validate the DropDownList:

function ValidateFeedbackType(source, arguments)
{
var ddl = document.getElementById(source.controltovalidate);
if (null != ddl)
{
var value = ddl[ddl.selectedIndex].value;
arguments.IsValid = (value != "00000000-0000-0000-0000-00000000000");
}
else
{
arguments.IsValid = false;
}
}

Dave Kehring - ASP.NET

Creating a Client-side Validator for the DropDownList

Internal Connection Error Masks Root Cause