7.16. Adding Validators to a Control
If you look back at Figure 7.5, you'll see that we must have two input fields to set up an appointment for the user: the user's name and the date of the appointment. A phone number is optional. If submitted, however, we want to confirm whether it is a seven-digit or a ten-digit U.S. phone number. If the user does not select a time, we'll assume that the default time on display is intended. If the user does not select a trainer, we'll make that assignment ourselves.
Web Forms provides the following validation controls (an icon for each is available in the Web Forms section of the Toolbox window):
RequiredFieldValidator, which prevents an entry from being skipped. For example, we will attach this to the TextBox in which the user enters his or her name. We cannot associate it with the Calendar.
RangeValidator, which confirms that an entry falls between a lower and an upper boundary. For example, a month entry might be checked to be a digit between 1 and 12. The values to be compared can be constant values or values from other controls. The types supported are numbers, characters, and the DateTime type.
CompareValidator, which compares an entry against a particular value using a specified relational operator. For example, we might compare the selected appointment date to see if it is less than or equal to the current date. The value being compared, as with RangeValidator, can be either a constant value or a value from another control. For example, if the user were changing her password, we might have CompareValidator check a second entry of the password against the first.
RegularExpressionValidator, which verifies that the input matches a regular-expression pattern. This control provides some useful predefined regular expressions, such as phone number, Internet URL, and zip code.
CustomValidator, which checks the input entry using validation logic that we code explicitly.
When we drop a validator control on the form, by default it takes up the amount of space required to display its ErrorMessage. Multiple validators associated with a control can end up taking up a lot of real estate on the page.
If we change the validator's Display property to Dynamic, the validation control takes up no space on the page until its error message is displayed. This approach allows us to stack multiple validators associated with a control. The drawback is that when an error message is displayed, the page layout may abruptly shift to accommodate the message.
Because these validations are performed on the server, error messages do not appear until the page is rendered back to the client.
A validator does not need to be placed next to the control it validates. Rather its placement determines where the error message, if triggered, is displayed on the page.
A common practice is to have all the validator error messages appear in a single location as a list. We do this by dropping a ValidationSummary control onto the form in the location where we wish the summary to appear. We set the HeaderText property to the string we wish displayed as the summary header. If we wish (and if the client's browser supports it), we can set the ShowMessageBox property to true. Doing this generates a pop-up summary of the error messages, as well as a display on the page.
The ErrorMessage entry of each triggered validator is now directed to the ValidationSummary control. What happens at the location of each validator? We have a choice. If we wish, we can set its Text property to an alternative text display—maybe an asterisk or an exclamation point. For example, these are my Text and ErrorMessage entries for our RequiredFieldValidator control associated with the TextBox that accepts the user's name:
ErrorMessage Please Enter Your Name Text <B>****</B>
Figure 7.7 shows the result, where both the user name and the phone entry are flagged as invalid.
Figure 7.7. Sample ValidationSummary Display
The binding of a validator to a control is accomplished through the ControlToValidate property. When we click on it in the Properties window of the validator control, a drop-down menu lists the available controls to which we can bind the validator. A validator can be bound to only one control at a time.
The RegularExpressionValidator provides a predefined set of regular expressions, such as phone number, Social Security number, zip code, Internet URL, and Internet e-mail address. There is support for phone and postal conventions as well for countries such as Japan, France, and Germany. Alternatively, we can provide our own regular expression against which to match the user's input.
To support multiple valid patterns, we separate the patterns with a bar (|). (Regular expressions are covered in Section 5.6.)
In comparing a user entry against a value or range of values, the user input is also validated against the Type property—one of string, int, double, Date, or Currency. If the data type of the entry does not match the validator's Type property, the validation fails and the comparison is not carried out.
If the user skips the input field, however, the validation control to compare the data does not fail. For example, if we set up a RangeValidator control to check that a TextBox entry is between a MinimumValue of 1 and a MaximumValue of 12, an entry of 13 triggers an error but a blank entry is treated as valid.
If we require field entry, we must associate a RequiredFieldValidator control with the control in addition to any explicit testing of that input. Multiple validators associated with a control are evaluated until either all succeed or one fails.
To compare the user input against a constant value, we specify that value in the ValueToCompare property of the CompareValidator control. By default, CompareValidator does an equality comparison. Alternatively, we can set the Operator property to one of the following: NotEqual, GreaterThan, GreaterThanEqual, LessThan, or LessThanEqual.
If we wish, we can compare the user input against the value of another control by setting the ControlToCompare property. (It's a drop-down menu of the available controls.) If both the ValueToCompare and ControlToCompare properties are set, the latter takes precedence—for example,
ControlToValidate DepartureDateEntry ControlToCompare ArrivalDateEntry Type DateTime Operator GreaterThanEqual
CustomValidator requires that we provide an event handler associated with the control's ServerValidate event. It returns a true or false value. Server-side validation is performed when the page is submitted, but before our code is invoked. Each validation control is invoked in turn. If a validation fails, the IsValid property of the validation control is set to false. If one or more validation controls fail, the IsValid property of the page itself is set to false.