Introduction
This webcontrol checks the user has entered a number with a certain range into the textbox. There is no need to draw also a required-validator and a range-validator on screen when type-checking is needed. It can also check a date, a string or an integer through the same mechanism. The purpose of this article is to learn and show how easy it is to wrap some code into a custom control which can be used elsewhere.
Background
The ValidatedTextBox is born out of the need for many textboxes, which contains money-values. Type-checking the money values, I used a range-validator. After putting a large number of textboxes and range-validators on my screen I realized I could make a custom control for it. Maybe I’ll extend the control in the future with client-side scripting so that a user can only press a number in the textbox.
Using the code
The control with class name ValidatedTextBox is a composite control, which consists of a textbox, a range-validator and optionally a required-validator. These three will be put after another in code. This is not so very complicated so I will only discuss three properties here: IsRequired, IsErrorTextBelow, MaxValue/Minvalue and a little intelligence: Aligning to the right when the textbox will contain a currency value.
The IsRequired property sets the required validator so that it will be rendered.
There is also a property IsErrorTextBelow that can be unset to place the errortext to the right of the textbox.
The maximum length of characters entered into a normal textbox can be set with the MaxLength property. The ValidatedTextBox control has properties MinValue and MaxValue to check the boundaries of the entered money value. These values are used to calculate the MaxLength. This way the control should pass the monkeytest.
The text aligns to the right when the Type property is currency. I was experimenting with this and did not know how to align text in a textbox to the right not using cascading style sheets. Therefore I tried overriding the render method and put a <div> around the textbox with aligning right. Now I know it can be easier, to set the style property of the textbox like:
if (rangeValidator.Type == ValidationDataType.Currency)
textBox.Style["TEXT-ALIGN"] = TextAlign.Right.ToString();
Points of Interest
As I was mentioning before, I did not need to override the render function. I wanted to align text to the right but I did not find a property style for a textbox. I thought that Microsoft forgot to implement this. I checked the Text Field control from the HTML tab in Visual Studio and I was surprised to find a style property that handles aligning. Because a TextBox server control renders as an HTML input control, I thought that overriding the render method and appending: ”TEXT-ALIGN: right” to the style property would solve my problems. Fortunately, the textbox does have a style property but only at runtime.
Another property of textbox I want to mention here is MaxLength. This is perfect for catching too much characters entered. I totally did not know about this property and I think it is very handy. Validation on client-side does not have to be javascripting.
History
- Version 1.0, March 2004.
- Updated demo, 19 Mar 2004
