Examining the CompareValidator

The CompareValidator validation control is useful for comparing the value of a user's input to a constant value or to the value of a different user input. For example, on the ValidationControlTestBed.aspx ASP.NET web page, the last two inputs, which ask users for the total number of children they have and the number of male children, are prime candidates for the CompareValidator.

The input that prompts users for their total number of children, for example, must be a value that is greater than or equal to 0. The input for the number of male children must be both greater than or equal to 0 and less than or equal to the value the user entered into the total number of children text box.

Let's first provide this validation check for the total number of children input. Start by dragging and dropping a CompareValidator from the Toolbox onto the designer, placing the CompareValidator immediately after the totalChildren TextBox Web control, as shown in Figure 12.11.

Figure 12.11. A CompareValidator Web control has been added.

The CompareValidator is capable of performing a number of comparisons. For example, the CompareValidator can compare an input to ensure that it's less than some value, greater than or equal to a value, or not equal to some value. The Operator property specifies what comparison the CompareValidator should perform.

To set the Operator property, click on the CompareValidator whose property you want to set; this will load the CompareValidator's properties in the Properties pane. Scroll down to the Operator property. When you click on this property, a drop-down list box will appear that shows the valid settings for this property. Specifically, the Operator property can be set to one of the following comparisons:

• Equal

• NotEqual

• GreaterThan

• GreaterThanEqual

• LessThan

• LessThanEqual

• DataTypeCheck

Because we want to ensure that the number of total children entered by users is greater than or equal to 0, we will set the Operator property to GreaterThanEqual.

By the Way

If you select the Operator choice DataTypeCheck, the CompareValidator will be considered valid only if the associated input Web control's contents are of the specified data type. The DataTypeCheck Operator is useful when you want to ensure a value of the right data type, such as a Date, but you don't care about the value especially (such as requiring that the Date be after January 1, 2005).

In addition to the Operator property, we need to set the Type property. The Type property indicates what data type users' input should be provided in. The Type property, which can be accessed via the Properties pane just like the Operator property, can be set to one of the following data types:

• String

• Integer

• Double

• Date

• Currency

Because we want the user to enter the total number of children input as a numeric value without a decimal, set the Type property to Integer.

At this point we have specified what comparison should be performed and what data type the user's input should appear as. We must now specify the value we want to compare the user's input to. The value to compare the user's input to can be either a constant value or the value entered by the user in some other input.

Because we want to ensure that the user's input is greater than or equal to 0, the comparison is being performed against a constant value, namely 0. To specify this, set the CompareValidator's ValueToCompare property to 0.

After we set this property, all that remains is to set the ControlToValidate and ErrorMessage properties. Because the CompareValidator is validating the user's input for the totalChildren TextBox Web control, set the ControlToValidate property to totalChildren. Then set the ErrorMessage property to a descriptive message, such as The total number of children must be a whole number greater than or equal to 0.

After you have set all of these properties, your screen should look similar to Figure 12.12.

Figure 12.12. The CompareValidator will ensure that the input is greater than or equal to 0.

At this point we can test the functionality of the CompareValidator by visiting the ValidationControlTestBed.aspx page through a browser. If you enter invalid input into the total number of children text box, you will get the error message "The total number of children must be a whole number greater than or equal to 0", as in Figure 12.13.

Figure 12.13. Invalid input produces an appropriate error message.

Invalid input is input that is not an integer and not greater than or equal to 0. Some examples of invalid input are

• Scott

• 4

• 3,456 (the presence of the comma makes this an illegal input)

• 3.14159

Some examples of legal input include

• 0

• 2

• 3456

• 45533

Did you Know?

Putting an upper bound on the total number of children input might make sense. For example, we can safely assume that no one will have more than 50 children. To place such an upper bound, we could add an additional CompareValidator and set its Operator property to LessThanEqual and its ValueToCompare property to 50.

Alternatively, instead of having to use two CompareValidators, we could use a single RangeValidator. In the next section we will examine the RangeValidator Web control.

One very important point is that the end user can omit a value for the total number of children input. That is, if the user enters a value into the name text box but enters no value into the total number of children text box and clicks the Click Me button, the ASP.NET page will post back and display the "Input is valid..." message.

The lesson to take away from this is that only the RequiredFieldValidator ensures that input is provided. That is, if you also want to require that the user enter a value into the total number of children input, you must add a RequiredFieldValidator for this input as well as a CompareValidator. (In the next section we will see how to have multiple validation controls validating a single input Web control.)

Using the CompareValidator to Compare One Input to Another

In the preceding example we used a CompareValidator to compare the total number of children input with a constant value0. In addition to comparing the value of a user input with a constant value, CompareValidators can also be used to compare the value of a user input with the value of another user input. For example, the value entered into the number of male children input must be less than or equal to the value the user entered into the total number of children input.

The only difference between a CompareValidator that performs a comparison against a constant value and one that performs a comparison against the value in another input is that in the former case the CompareValidator's ValueToCompare property is set to the constant value to compare the user's input to. In the latter case, instead of setting the ValueToCompare property, we set the ControlToCompare property, specifying the ID property of the input Web control whose value we want to compare.

To add a CompareValidator that ensures that the value entered into the number of male children input is less than or equal to the total number of children input, start by dragging and dropping a CompareValidator from the Toolbox onto the designer, placing the CompareValidator after the maleChildren TextBox Web control. Next, set the CompareValidator's ControlToValidate property to maleChildren, its Operator to LessThanEqual, its Type to Integer, its ErrorMessage to The number of male children must be less than or equal to the number of total children, and its ControlToCompare property to totalChildren.

After you have set these five properties, your screen should look similar to Figure 12.14.

Figure 12.14. A CompareValidator has been added after the totalChildren TextBox Web control.

Now take a moment to visit the ASP.NET page through a browser. If you enter a value of, say, 4 into the total number of children text box and a value of 8 into the number of male children text box, you will be shown the error message "The number of male children must be less than or equal to the number of total children". Similarly, if you enter a noninteger value into the number of male children text box (such as "Scott" or 4.5), you will get the same error message.

What, though, will happen if you enter a value of 5 into the total number of children text box and a value of 2 into the number of male children text box? No error message is displayed because 2 is less than 5, and 2 is an integer.

To protect against this, we must do what we did for the total number of children input: add a CompareValidator that checks to ensure that the value entered into the number of male children input is greater than or equal to 0.

To provide this additional validation, we need to add an additional CompareValidator. To accomplish this, drag and drop another CompareValidator, placing it after the maleChildren TextBox Web control's existing CompareValidator. Next, set this CompareValidator's ControlToValidate property to maleChildren, its Type property to Integer, its Operator property to GreaterThanEqual, its ErrorMessage property to The number of male children must be greater than or equal to 0, and its ValueToCompare property to 0.

Figure 12.15 shows the Visual Web Developer after this CompareValidator has been added and its properties have been set.

Figure 12.15. An additional CompareValidator has been added to help validate the number of male children input.

With this additional CompareValidator, an error message is displayed on the ASP.NET page if the user enters a negative value for the number of male children input.