Recipe 3.4. Requiring That Two Data Input Fields Match

Problem

You need to make sure the data a user enters in two fields on an input form is the same, such as when performing password or email verification.

Solution

Add RequiredFieldValidator controls to the .aspx file for both TextBox controls to prevent a user from skipping one of the fields. Next, add a CompareValidator control to one of the TextBox controls. Finally, verify that validation was successful from within the event handler of the control that completes the user's entry for the page.

In the .aspx file:

1. Add a RequiredFieldValidator control for each of the two text boxes in which the user must enter matching data.

2. Add a CompareValidator control to the control that must have its input match the other control (usually the second one).

3. Add Save and Cancel (or equivalently named) buttons.

4. Set the Save button's CausesValidation attribute to true to have validation performed when the button is clicked (set it to False for the Cancel button).

In the code-behind class for the page, use the .NET language of your choice to add code to the event handler for the Save button's click event to check the Page.IsValid property and verify that all validation was successful. (See Recipe 3.1 for details.)

Figure 3-5 shows a typical form with normal output prior to data entry. Figure 3-6 shows the error message that appears on the form when the user enters passwords that do not match. Example 3-5 shows the .aspx file for the solution we have implemented to illustrate this recipe. See Examples 3-2 and 3-3 (Recipe 3.1) for the companion code-behind files.

Discussion

The first step in making sure the data a user enters in two fields is the same is to place RequiredFieldValidator controls in the form for the two fields. In our application, for example, RequiredFieldValidator controls are added for the Password and Re-enter Password text boxes.

Next, a CompareValidator control must be added for the second field whose input must match the first field's input. In our example application, a CompareValidator is added for the Re-enter Password because its input must match the Password's input. The validators are placed to the right of the text boxes to cause the error messages to be displayed beside the text boxes.

Figure 3-5. Form with compare validation outputnormal

Figure 3-6. Form with compare validation outputwith error message

Because the CompareValidator allows empty input, a RequiredFieldValidator must be used with each of the controls involved in the comparison. Attempting to use a CompareValidator without a RequiredFieldValidator will result in odd and undesirable behavior.

In our application, for example, if the RequiredFieldValidator were omitted for the Re-enter Password text box, the comparison validation would be performed only if data were entered in the Re-enter Password text box. The end result would be failing to flaga validation error when the user enters data in the Password text box but leaves the Re-enter Password text box empty.

See Recipe 3.1 for more information about how to set up the required field validators.

The ControlToValidate attribute of the CompareValidator control is set to the ID of the control to validate. On our form, the control to validate is txtPassword2, the TextBox in which the user re-enters his password:

 <asp:CompareValidator  runat="server"  ControlToValidate="txtPassword2"  ControlToCompare="txtPassword1"  Css  Display="Dynamic"  EnableClientScript="True">    <img src="/books/1/505/1/html/2/images/arrow_alert.gif" alt="arrow"/>    Both Passwords Must Match </asp:CompareValidator> 

The ControlToCompare attribute is set to the ID of the control used as the reference, in our case txtPassword1:

 <asp:CompareValidator  runat="server"  ControlToValidate="txtPassword2"  ControlToCompare="txtPassword1"  Css  Display="Dynamic"  EnableClientScript="True">        <img src="/books/1/505/1/html/2/images/arrow_alert.gif" alt="arrow"/>    Both Passwords Must Match </asp:CompareValidator> 

In all other respects, the .aspx and code-behind files are the same as those in Recipe 3.1. See that recipe's discussion for comments about the Display, EnableClientScript, and CausesValidation attributes in particular. You'll also find explanations of the Save and Cancel buttons and various other aspects of the code.

See Also

Recipe 3.1

Example 3-5. Form with compare validation (.aspx)

 <%@ Page Language="VB" MasterPageFile="~/ASPNetCookbookVB.master"  AutoEventWireup="false"  CodeFile="CH03CompareValidationVB.aspx.vb"  Inherits="ASPNetCookbook.VBExamples.CH03CompareValidationVB"  title="Compare Validator" %> <asp:Content  Runat="server" ContentPlaceHolder>    <div align="center" >     Field Comparison Validation (VB)    </div>    <table align="center" ></tr> <td >First Name: </td> <td>   <asp:TextBox  Runat="server" Columns="30" Css /> </td>      </tr>      </tr> <td >Last Name: </td> <td>   <asp:TextBox  Runat="server" Columns="30" Css />     </td>      </tr>      </tr> <td >Age: </td> <td>   <asp:TextBox  Runat="server" Columns="30" Css />     </td>      </tr>      </tr> <td >Country: </td> <td>   <asp:DropDownList  Runat="server" >  <asp:ListItem Selected="True" Value="0">----- Select Country -----</asp:ListItem>  <asp:ListItem Value="1">Canada</asp:ListItem>  <asp:ListItem Value="2">United States</asp:ListItem>   </asp:DropDownList>     </td>      </tr>      </tr> <td >Email Address: </td> <td>   <asp:TextBox  Runat="server" Columns="30" Css />     </td>      </tr>      </tr> <td >Password: </td> <td>   <asp:TextBox  Runat="server" TextMode="Password" Columns="30" Css />   <asp:RequiredFieldValidator  Runat="server" ControlToValidate="txtPassword1" Css Display="Dynamic" EnableClientScript="True"> <img src="/books/1/505/1/html/2/images/arrow_alert.gif" alt="arrow"/> Password Is Required  </asp:RequiredFieldValidator>     </td>      </tr>      </tr>     <td >Re-enter Password: </td> <td>   <asp:TextBox  Runat="server" TextMode="Password" Columns="30" Css />   <asp:RequiredFieldValidator  Runat="server" ControlToValidate="txtPassword2" Css Display="Dynamic" EnableClientScript="True"> <img src="/books/1/505/1/html/2/images/arrow_alert.gif" alt="arrow"/> Re-Entered Password Is Required   </asp:RequiredFieldValidator>   <asp:CompareValidator  runat="server" ControlToValidate="txtPassword2" ControlToCompare="txtPassword1" Css Display="Dynamic" EnableClientScript="True">   <img src="/books/1/505/1/html/2/images/arrow_alert.gif" alt="arrow"/>   Both Passwords Must Match       </asp:CompareValidator>     </td>      </tr>      </tr>    <td colspan="2">  <br/>  <table align="center" width="50%"></tr>     <td align="center">    <input  runat="server" type="button"    value="Save" causesvalidation="true"    onserverclick="btnSave_ServerClick"/>         </td>         <td align="center">        <input  runat="server" type="button"    value="Cancel" causesvalidation="false"    onserverclick="btnCancel_ServerClick" />  </td>   </tr>         </table>      </td>   </tr>    </table> </asp:Content>