Creating a TextBoxLengthValidator Validator ControlBy Scott Mitchell and Jisun Lee
When collecting input from a user, it is important to ensure that the input received meets the requirements of the system. For example, when placing an order at a site like Amazon.com it is vital that the user supply certain required bits of information, such as the shipping address and their payment information. Also, the system may expect data in a specified format, or adhering to some other constraint. A common task for Web developers prior to ASP.NET was writing code that would ensure that the data submitted by a user met the system's specific requirements. ASP.NET, however, greatly simplified this through its validation controls, which are a set of Web controls designed specifically to validate input data.
You've no doubt had experience using the built-in ASP.NET validation controls: the RequiredFieldValidator is used to ensure that the user provides a value for a TextBox or DropDownList; the CompareValidator can be used to ensure that the value entered into a TextBox is of a specific type (such as String, Numeric, Date, etc.), or can compare a TextBox value to a static value or to a value in another TextBox; the RangeValidator ensures that a value entered is within an acceptable range; and the RegularExpressionValidator can be used to check that a value entered conforms to a specified regular expression (useful for ensuring that data is entered in a certain format, such as phone numbers, email addresses, social security numbers, etc.).
While these validation controls provide most validation support you'll need, what if you need to implement some other type of validation not provided by these controls? One option is to use the CustomValidator. With the CustomValidator you must provide a custom server-side method to validate the data, and an optional client-side function. (For more information on using CustomValidators be sure to read Using the CustomValidator Control.)
Another option for providing custom validation is to create your own validation server control. This approach is ideal to the
CustomValidator approach if you know that you are going to be using this validation on multiple pages or in more than one project.
By creating a custom validation server control you can plop down the custom control on your page just like you would any other
validation control. You don't have to write any extra code or logic for your custom validation as it's all wrapped up in the
custom control. Furthermore, utilizing the control in other Web applications is as simple as copying over the custom control's
.dll file) into the other Web application's
/bin directory. In this article we'll look
at how to create a custom validation control that ensures that the number of characters entered into a TextBox is less than
or equal to some prescribed number.
Limiting the Number of Characters Entered Into a Form Field
There are many situations in which we may want to limit the number of characters a user can enter into a form field. For example, if the data entered by the user is being stored in a database, a form field's corresponding database field might be configured to only hold, say, 50 characters. Therefore, we want to ensure that the user does not provide a value that contains more than 50 characters. Furthermore, certain types of input may require that the number of characters not exceed a certain length.
One option to limiting the number of characters a user can provide in a TextBox is to set the TextBox's
property. For browsers that support this attribute, this will prevent the user from entering more than the specified number
of characters. This is one approach to limiting the number of characters a user can enter into a TextBox, but it is not a complete
solution since it only works client-side; that is, there's no automatic server-side check on postback to ensure that the
data submitted does not exceed the specified
MaxLength (what it boils down to is that you have to write this
code). A nefarious user circumvent the effects of the
MaxLength property by saving the page's HTML markup on
his computer, taking out the TextBox's
maxlength attribute, and visiting this altered page. The downside, as
aforementioned, is that you have to not forget to add a server-side check on postback to ensure that the data submitted by
the user actually does contain no more than the maximum number of characters. Another downside of
that the browser prevents new characters from being entered into the TextBox that would exceed the TextBox's specified maximum
length. This can be annoying in certain situations: say you have a TextBox with
MaxLength equal to 3. Now, say
the user types in the value 124, and then realizes the want 144 instead. They might think to themselves, I'll put the cursor
between the 1 and 2, type 4, and then hit Delete. However, when they try to hit 4, it won't let them, since it would exceed
the TextBox's maximum length. Rather, they'd have to first delete 2 and then enter 4. (Not a huge deal, but it could frustrate
an end user who is used to entering and then deleting, rather than the other way around.)
Better approaches include using a CustomValidator or a RegularExpressionValidator. With a CustomValidator you could write the necessary server-side and (optionally) client-side code to validate a field's length. With a RegularExpressionValidator you can specify that the input must contain a certain number of characters, like between 0 and 100 characters, or more fine-grained, like between 5 and 10 characters. For more information on using a RegularExpressionValidator in this manner refer to this newsgroup post by Peter Blum.
While the RegularExpressionValidator approach works, I prefer to create a custom validation server control myself.
By using a validation control you would not need to write any server-side code other than the check to ensure
Page.IsValid is True, nor would you need to bother with the details of a regular expression. If you are already
familiar with using validation controls, having a custom validation control to ensure the TextBox's length is within a certain bounds
will seem very natural to use - simply plop down the validation control on a page, specify the control to validate, and
set finally set the
MaximumLength property. That's all there is to it!
In the remainder of this article we'll be building a custom validation server control
called TextBoxLengthValidator, which, as its name implies, ensures that a TextBox's length is less than or equal to a specified
Creating the TextBoxLengthValidator
All of the ASP.NET validation controls are derived from the
BaseValidatorclass contains a number of protected methods that provide important functionality that our custom validation server control will need to override. The most important one is
EvaluateIsValid(), which returns a Boolean value indicating whether or not the value being validated is valid or not. The
BaseValidatorclass also contains a number of properties that are common to all validators, such as
ControlToValidate. By having our custom validation control derive from
BaseValidatorwe do not have to provide these properties. There is one property, however, our TextBoxLengthValidator needs: an integer property that the page developer can set to specify the maximum number of characters that can appear in the TextBox specified in the
The following code shows the
MaximumLength property and overridden
EvaluateIsValid() method for
the custom validation control (the complete code can be downloaded at the end of this article):
EvaluateIsValid() method the value of the control specified by the
property can be grabbed via the
GetControlValidationValue(). Once we have this
value (which is a String value), we return True if the String's length is less than or equal to the
property, and False otherwise. (Note: giving
MaximumLength a value less than 0 disables the validation control;
that is, if
MaximumLength is less than 0, then any length input will pass as valid.)
Adding Client-Side Validation
The code presented so far is sufficient to build a validation control that does not utilize client-side validation, but just server-side validation. It's vital that we provide server-side validation, since all validation controls should do so, but by omitting client-side validation we are worsening the user experience for those visiting the site with an uplevel browser. The built-in ASP.NET validation server controls provide client-side validation in the following manner: in their
AddAttributesToRender()method the controls add an attribute to their rendered HTML element called
ValidationExpressionproperty, and does so through an HTML attribute named
WebUIValidation.js, which a reference is added to the page when any validation controls are used. (The
WebUIValidation.jsfile can be found in the
/aspnet_client/system_web/VERSION_NUMBERfolder in your Web site's root physical directory.)
In order to add client-side support for the TextBoxLengthValidator validation control we need to specify what client-side
function to call and what parameters to pass it. This information, as with the other validation controls, can be specified in
AddAttributesToRender() method. The challenge is that the
WebUIValidation.js file does not contain
a function for ensuring that the length of a TextBox is indeed less than some value. We have to write that ourselves. We
have two options here:
WebUIValidation.jsby hand, adding the necessary function
- Pros: Once this file is modified our TextBoxLengthValidator will work just like any other validation
control. All necessary script will be stashed in a single
.jsfile, which the browser can cache.
- Cons: We have to modify a system file. Also, if we want to take this functionality to other Web servers,
we must modify their
WebUIValidation.jsfile as well.
- Pros: Once this file is modified our TextBoxLengthValidator will work just like any other validation control. All necessary script will be stashed in a single
- Pros: This solution works without needing to modify a system file. Makes deployment easier.
WebUIValidation.jsfile instead.) The following code adds the client-side functionality to the TextBoxLengthValidator control:
Like the server-side
EvaluateIsValid() method, the client-side
function returns True if the data being validated is valid, and False otherwise. In the
the client-side function to use and the parameter are specified (
evaluationfunction is set to
maximumlength is set to the value of the
MaximumLength property). In the
from server-side code be sure to read my articles Working
With Client-Side Script and Injecting
Client-Side Script from an ASP.NET Server Control.)
As with the ASP.NET validation controls, the TextBoxLengthValidator control renders client-side validation script only for
Internet Explorer. This is because the
document.all). This will be fixed
in ASP.NET 2.0, but for ASP.NET 1.x you'll need to essentially reinvent the wheel and create your own
class. I discuss this at more length in my article Client-Side Validation in Downlevel Browsers.
Using the TextBoxLengthValidator Control on an ASP.NET Page
The download accompanying this article contains the complete source code for the TextBoxLengthValidator validation control, along with a precompiled assembly for ASP.NET 1.1. If you are using Visual Studio .NET 2003, first add the TextBoxLengthValidator control to the Toolbox (right-click on the Toolbox and choose to Add/Remove Items, browse to the TextBoxLengthValidator assembly and click OK); then you can simply drag and drop the TextBoxLengthValidator control onto your ASP.NET pages. If you are using Visual Studio .NET 2002 (i.e., ASP.NET 1.0), you'll need to compile the code first. Create a new Web Control Library project, add the
.csfile, and build the solution. Repeat the instructions for VS.NET 2003 using this newly compiled assembly.
If you are not using Visual Studio .NET you'll need to manually add the assembly to the
/bin directory of your
Web application. On pages that you want to use the control, add the following
@Register directive to the
top of the page:
<%@ Register TagPrefix="skm" Namespace="skmExtendedValidators" Assembly="skmExtendedValidators" %>.
Then, wherever you want the control to be added, just use:
<skm:TextBoxLengthValidator runat="server" ... />.
To see a working example be sure to check out the live demo.
That, basically, sums up the control (and, therefore, the article!). You can download the complete code at the end of this article. Also, there's a live demo to try that demonstrates the TextBoxLengthValidator validation control in action.