Programming ASP.NET

Javascript validator Javascripts

Main Page

↑

8.3 The Compare Validator

While ensuring that the user has made an entry is very useful, you will often want to validate that the content of the entry is within certain guidelines. One of the most common requirements for validation is to compare the user's input to a constant, the value of another control, or a database value.

For instance, to continue the example web page, you can add a new control to your bug reporting dialog that will ask the user how many copies of the book he purchased. The following code should be inserted immediately before the HTML source for the Display Errors drop-down:

<tr>
   <td>Number purchased:</td>
   <td><ASP:TextBox id="txtNumPurch" runat=server width="50px" /></td>

You can then add a required field validator to ensure that some number is entered:

<td>
<asp:RequiredFieldValidator 
id="RequiredFieldValidatorNumPurch" 
ControlToValidate="txtNumPurch" 
ErrorMessage ="You did not enter the number purchased"
Width="100%" runat="server" >*
</asp:RequiredFieldValidator>

And finally you can add a compare validator to ensure that the number of books purchased is greater than zero:

<asp:CompareValidator
runat="server"
id="CompareValidatorNumPurch"
ControlToValidate="txtNumPurch"
ErrorMessage ="Invalid number purchased"
Type="Integer"
Operator="GreaterThan"
ValueToCompare=0>*</asp:CompareValidator>
</td></tr>

The Compare validator takes the name of the control to validate (in this case, your text field) as well as an error message to display in the summary if the validation fails. In addition, the ValueToCompare attribute takes a constant, in this case zero. The Operator attribute determines how the comparison will be made (that is, how the input value must be related to the ValueToCompare).

The possible values for the Operator attribute are: Equal, NotEqual, GreaterThan, GreaterThanEqual, LessThan, LessThanEqual, and DataTypeCheck. In this example case, to be valid, the input value must be greater than the ValueToCompare constant.

You must use the Type attribute to tell the control what type of value it is working with. The Type attribute takes one of the ValidationDataType enumerated values: Currency, Date, Double, Integer, or String. In the example case, the values are compared as integers.

8.3.1 Checking the Input Type

Rather than checking that the number of books purchased is greater than zero, you might simply want to check that it is a number (rather than a letter or date). To do this, you make a minor change to the CompareValidator.

To accomplish this change, remove the ValueToCompare attribute and change the Operator attribute from GreaterThan to DataTypeCheck. Since the Type attribute is Integer, the control will report any integer value as valid. The following code should replace the code for the CompareValidator that you added in the last section:

<asp:CompareValidator
runat="server"
id="CompareValidatorNumPurch"
ControlToValidate="txtNumPurch"
ErrorMessage ="Invalid number purchased"
Type="Integer"
Operator="DataTypeCheck">*</asp:CompareValidator>

8.3.2 Comparing to Another Control

It is possible to compare a value in one control to the value in another control rather than to a constant. A classic use of this might be to ask the user to enter his password twice and then to validate that both entries are identical.

The common scenario is that you've asked the user to pick a new password. For security, when the password is entered, the text is disguised with asterisks, as shown in Figure 8-8. Because this will be the password the user will need for logging in, it is imperative you validate that the user entered the password as intended. The usual solution is to ask the user to reenter the password, and then you validate that the same password was entered each time. The CompareValidator is perfect for this.

Figure 8-8. Entering a password

Start by asking for the password, setting the text field to TextMode="Password" so that the entry will be hidden. The following code can be inserted directly in front of the HTML source that defines the row containing the Display Errors drop-down list:

<tr>
   <td>Enter your password:</td>
   <td>
      <asp:TextBox id="txtPasswd1"
      runat=server
      TextMode="Password"
      Width="80"></asp:TextBox>
   </td>
</tr>

Next, add the second password field:

<tr>
   <td>Re-enter your password:</td>
   <td>
      <asp:TextBox id="txtPasswd2"
       runat=server
       TextMode="Password"
       Width="80"></asp:TextBox>
   </td>

All validators other than the RequiredFieldValidator consider a blank field to be valid. In fact, if one field has a value and the other field is blank, the comparison validator will return valid! To avoid this problem, add RequiredFieldValidators for both passwords:

<!-- Text fields for passwords -->
 <tr>
    <td>Enter your password:</td>
    <td>
       <asp:TextBox id="txtPasswd1"
       runat=server
       TextMode="Password"
       Width="80"></asp:TextBox>
    </td>
    <td>
       <!-- required to enter the password -->
       <asp:RequiredFieldValidator 
       id="ReqFieldTxtPassword1" 
       ControlToValidate="txtPasswd1" 
       ErrorMessage ="Please enter your password"
       Width="100%" runat=server>*</asp:RequiredFieldValidator>    
    </td>
 </tr>
 
 <!-- Second password for comparison -->
 <tr>
    <td>Re-enter your password:</td>
    <td>
       <asp:TextBox id="txtPasswd2"
        runat=server
        TextMode="Password"
        Width="80"></asp:TextBox>
    </td>
    
    <td>
       <!-- Second password is required -->
       <asp:RequiredFieldValidator 
       id="ReqFieldTxtPassword2" 
       ControlToValidate="txtPasswd2" 
       runat=server
       ErrorMessage ="Please re-enter your password"
       Width="100%" runat=server>*</asp:RequiredFieldValidator>    
       
       <!-- Second password must match the first -->
       <asp:CompareValidator
       runat=server
       id="CompValPasswords"
       ControlToValidate="txtPasswd2"
       ErrorMessage ="Passwords do not match"
       Type="String"
       Operator="Equal"
       ControlToCompare="txtPasswd1">*</asp:CompareValidator>
    </td>
 </tr>

If the controls you are comparing have a missing or invalid value, the values will be considered valid. The CompareValidator requires that values be present and valid.

You are now ready to validate that the entries in both text fields are identical. Add the comparison validator and its attributes to compare the first password field with the second, as shown in the following code fragment:

<asp:CompareValidator
runat=server
id="CompValPasswords"
ControlToValidate="txtPasswd2"
ErrorMessage ="Passwords do not match"
Type="String"
Operator="Equal"
ControlToCompare="txtPasswd1">*</asp:CompareValidator>

In this case you do not have a ValueToCompare attribute, but instead you have a ControlToCompare attribute, which takes the ID of the control against which you'll compare this value.

You've changed the Operator attribute to Equal, which indicates that the new value must be equal to the value in the control with which you're comparing it, and you've set the Type of the comparison to String. If you enter two different passwords, the error is reported, as shown in Figure 8-9.

Figure 8-9. Comparing against a control

If the two passwords are identical, the ComparisonValidator is satisfied and the second password field is marked as valid. The complete .aspx source is shown in Example 8-4, with a C# page directive.

Example 8-4. Compare validation

<%@ Page language="c#" 
Codebehind="WebForm1.aspx.cs" 
AutoEventWireup="false" 
Inherits="WebApp0403.WebForm1" %>

<HTML>
  <HEAD>

      <!-- Demonstrate comparison validation -->
      <meta name=vs_targetSchema content="Internet Explorer 5.0">
      <meta name="GENERATOR" Content="Microsoft Visual Studio 7.0">
      <meta name="CODE_LANGUAGE" Content="C#">
  </HEAD>
  
   <body>
   
   <H3><FONT face=Verdana>Bug Report</FONT> </H3>
      <form runat="server" ID="frmBugs">
         <table bgcolor=gainsboro cellpadding=10>
            <tr valign="top">
               <td colspan=3>
                  <!-- Display error messages -->
                  <asp:Label ID="lblMsg" 
                  Text="Please report your bug here" 
                  ForeColor="Red" Font-Name="Verdana" 
                  Font-Size="10px" runat=server 
                  font-names="Verdana">
                  Please report your bug here</asp:Label>
                  <br>
               </td>
            </tr>
            <tr>
               <td align=right>
                  <font face=Verdana size=2>Book</font>
               </td>
               
               <td>
               <!-- Drop down list with the books (must pick one) -->
                  <ASP:DropDownList id=ddlBooks runat=server>
<asp:ListItem Value="-- Please Pick A Book --">-- Please Pick A Book -
   </asp:ListItem>
<asp:ListItem Value="Programming ASP.NET">Programming 
   ASP.NET</asp:ListItem>
<asp:ListItem Value="Programming C#">Programming C#</asp:ListItem>
<asp:ListItem Value="Teach Yourself C++ In 21 Days">Teach Yourself C++ In 
   21 Days</asp:ListItem>
<asp:ListItem Value="Teach Yourself C++ In 24 Hours">Teach Yourself C++ In 
   24 Hours</asp:ListItem>
<asp:ListItem Value="TY C++ In 10 Minutes">TY C++ In 10 
   Minutes</asp:ListItem>
<asp:ListItem Value="TY More C++ In 21 Days">TY More C++ In 21 
   Days</asp:ListItem>
<asp:ListItem Value="C++ Unleashed">C++ Unleashed</asp:ListItem>
<asp:ListItem Value="C++ From Scratch">C++ From Scratch</asp:ListItem>
<asp:ListItem Value="XML From Scratch">XML From Scratch</asp:ListItem>
<asp:ListItem Value="Web Classes FS">Web Classes FS</asp:ListItem>
<asp:ListItem Value="Beg. OO Analysis &amp; Design">Beg. OO Analysis &amp; 
   Design</asp:ListItem>
<asp:ListItem Value="Clouds To Code">Clouds To Code</asp:ListItem>
<asp:ListItem Value="CIG Career Computer Programming">CIG Career Computer 
   Programming</asp:ListItem>
               </ASP:DropDownList>
               </td>
               
               <!-- Validator for the drop down -->
               <td align=center rowspan=1>
                  <asp:RequiredFieldValidator 
                  id="reqFieldBooks" 
                  ControlToValidate="ddlBooks" 
                  InitialValue="-- Please Pick A Book --" 
                  ErrorMessage ="You did not choose a book from the 
                   drop-down"
                  Width="100%" runat=server >*</asp:RequiredFieldValidator>
               </td>
            </tr>
            
            <!-- Radio buttons for the edition -->                  
            <tr>
               <td align=right>
                  <font face=Verdana size=2>Edition:</font>
               </td>
               <td>
                  <ASP:RadioButtonList id=rblEdition 
                  RepeatLayout="Flow" runat=server>
<asp:ListItem Value="1st">1st</asp:ListItem>
<asp:ListItem Value="2nd">2nd</asp:ListItem>
<asp:ListItem Value="3rd">3rd</asp:ListItem>
<asp:ListItem Value="4th">4th</asp:ListItem>
               </ASP:RadioButtonList>
               </td>
               
               <!-- Validator for editions -->
               <td align=center rowspan=1>
                  <asp:RequiredFieldValidator 
                  id="reqFieldEdition" 
                  ControlToValidate="rblEdition" 
                  ErrorMessage ="You did not choose an edition"
                  Width="100%" runat="server" >*
                  </asp:RequiredFieldValidator>
               </td>
            </tr>
            
            <!-- Multi-line text for the bug entry -->               
            <tr>
               <td align=right style="HEIGHT: 97px">
                  <font face=Verdana size=2>Bug:</font>
               </td>
               <td style="HEIGHT: 97px">
                  <ASP:TextBox id=txtBug runat=server width="183px" 
                  textmode="MultiLine" height="68px"/>
               </td>
               
               <!-- Validator for the text box-->               
               <td style="HEIGHT: 97px">
                  <asp:RequiredFieldValidator 
                  id="reqFieldBug" 
                  ControlToValidate="txtBug" 
                  ErrorMessage ="You did not enter the bug text"
                  Width="100%" runat=server>*</asp:RequiredFieldValidator>
               </td>
            </tr>
            
            <!-- Text box for number purchased -->
            <tr>
               <td>Number purchased:</td>
               <td><ASP:TextBox id="txtNumPurch" runat=server 
                width="50px" /></td>
               <td>
               
                  <!-- Required field validator for number purchased -->
                  <asp:RequiredFieldValidator 
                  id="RequiredFieldValidatorNumPurch" 
                  ControlToValidate="txtNumPurch" 
                  ErrorMessage ="You did not enter the number purchased"
                  Width="100%" runat=server>*</asp:RequiredFieldValidator>
                  
                  <!-- Validate at least one book purchased -->
                  <asp:CompareValidator
                  runat=server
                  id="CompareValidatorNumPurch"
                  ControlToValidate="txtNumPurch"
                  ErrorMessage ="Invalid number purchased"
                  Type="Integer"
                  Operator="DataTypeCheck"
                  ValueToCompare=0>*</asp:CompareValidator>
               </td>
            </tr>
            
            <!— Text fields for passwords —>
            <tr>
               <td>Enter your password:</td>
               <td>
                  <asp:TextBox id="txtPasswd1"
                  runat=server
                  TextMode="Password"
                  Width="80"></asp:TextBox>
               </td>
               <td>
                  <!— required to enter the password —>
                  <asp:RequiredFieldValidator 
                  id="ReqFieldTxtPassword1" 
                  ControlToValidate="txtPasswd1" 
                  ErrorMessage ="Please enter your password"
                  Width="100%" runat=server>*</asp:RequiredFieldValidator> 
               </td>
            </tr>
            
            <!— Second password for comparison —>
            <tr>
               <td>Re-enter your password:</td>
               <td>
                  <asp:TextBox id="txtPasswd2"
                   runat=server
                   TextMode="Password"
                   Width="80"></asp:TextBox>
               </td>
               
               <td>
                  <!— Second password is required —>
                  <asp:RequiredFieldValidator 
                  id="ReqFieldTxtPassword2" 
                  ControlToValidate="txtPasswd2" 
                  runat=server
                  ErrorMessage ="Please re-enter your password"
                  Width="100%" runat=server>*</asp:RequiredFieldValidator> 
                  
                  <!— Second password must match the first —>
                  <asp:CompareValidator
                  runat=server
                  id="CompValPasswords"
                  ControlToValidate="txtPasswd2"
                  ErrorMessage ="Passwords do not match"
                  Type="String"
                  Operator="Equal"
                  ControlToCompare="txtPasswd1">*</asp:CompareValidator>
               </td>
            </tr>
            
           <!-- Drop down for the error display -->                  
           <tr>
               <td align=right>
                  <font face=Verdana size=2>Display Errors</font>
               </td>
               <td>
                  <asp:DropDownList id="lstDisplay" 
                  AutoPostBack=true 
                  OnSelectedIndexChanged="lstDisplay_SelectedIndexChanged" 
                  runat=server >
                        <asp:ListItem Selected>Summary</asp:ListItem>
                        <asp:ListItem>Msg. Box</asp:ListItem>
                  </asp:DropDownList>
               </td>
               <td>
               </td>
            </tr>
            
            <!-- Drop down for display report choice -->
            <tr>
               <td align="right">
                    <font face=Verdana size=2>Display Report</font>
               </td>
               <td>
                  <asp:DropDownList id="lstFormat" 
                  AutoPostBack=true 
                  OnSelectedIndexChanged="lstFormat_SelectedIndexChanged" 
                  runat=server NAME="lstFormat">
                      <asp:ListItem >List</asp:ListItem>
                      <asp:ListItem Selected>Bulleted List</asp:ListItem>
                      <asp:ListItem>Single Paragraph</asp:ListItem>
                  </asp:DropDownList>
               </td>
            </tr>                     
            
            <!-- Submit button -->
            <tr>
               <td>
               </td>
               <td>
                  <ASP:Button id=btnSubmit 
                  text="Submit Bug" runat=server />
               </td>
               <td>
               </td>
            </tr>
         </table>
         
         <!-- Validation Summary Report -->
         <asp:ValidationSummary ID="ValSum" runat="server" 
          HeaderText="The following errors were found">
         </asp:ValidationSummary>
      </form>
   </body>
</HTML>