2.3.1 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. 2.3.2 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: -
Add a RequiredFieldValidator control for each of the two text boxes in which the user must enter matching data. -
Add a CompareValidator control to the control that must have its input match the other control. -
Add Save and Cancel (or equivalently named) buttons . -
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 2.1 for details.) Figure 2-5 shows a typical form with normal output prior to data entry. Figure 2-6 shows the error message that appears on the form when the user enters passwords that do not match. Example 2-5 shows the .aspx file for the solution we have implemented to illustrate this recipe. See Example 2-2 and Example 2-3 (Recipe 2.1) for the companion code-behind files. Figure 2-5. Form with compare validation output ”normal 
Figure 2-6. Form with compare validation output ”with error message 
2.3.3 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.  | 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 flag a validation error when the user enters data in the Password text box but leaves the Re-enter Password text box empty. | |
See Recipe 2.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 ID="cvPassword2" runat="server" ControlToValidate="txtPassword2" ControlToCompare="txtPassword1" CssClass="AlertText" Display="Dynamic" EnableClientScript="True"> <img src="images/arrow_alert.gif"> Both Passwords Must Match </asp:CompareValidator>
The ControlToCompare attribute is set to the ID of the control that is used as the reference, in our case txtPassword1 : <asp:CompareValidator ID="cvPassword2" runat="server" ControlToValidate="txtPassword2" ControlToCompare="txtPassword1" CssClass="AlertText" Display="Dynamic" EnableClientScript="True"> <img src="images/arrow_alert.gif"> Both Passwords Must Match </asp:CompareValidator>
In all other respects, the .aspx and code-behind files are the same as those in Recipe 2.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. 2.3.4 See Also Recipe 2.1 Example 2-5. Form with compare validation (.aspx) <%@ Page Language="vb" AutoEventWireup="false" Codebehind="CH02CompareValidationVB.aspx.vb" Inherits="ASPNetCookbook.VBExamples.CH02CompareValidationVB" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Compare Validator</title> <link rel="stylesheet" href="css/ASPNetCookbook.css"> </head> <body leftmargin="0" marginheight="0" marginwidth="0" topmargin="0"> <form id="frmValidation" method="post" runat="server"> <table width="100%" cellpadding="0" cellspacing="0" border="0"> <tr> <td align="center"> <img src="images/ASPNETCookbookHeading_blue.gif"> </td> </tr> <tr> <td class="dividerLine"> <img src="images/spacer.gif" height="6" border="0"></td> </tr> </table> <table width="90%" align="center" border="0"> <tr> <td><img src="images/spacer.gif" height="10" border="0"></td> </tr> <tr> <td align="center" class="PageHeading"> Field Comparison Validation (VB) </td> </tr> <tr> <td><img src="images/spacer.gif" height="10" border="0"></td> </tr> <tr> <td align="center"> <table border="0"> <tr> <td class="LabelText">First Name: </td> <td> <asp:TextBox id="txtFirstName" Runat="server" Columns="30" CssClass="LabelText" /> </td> </tr> <tr> <td class="LabelText">Last Name: </td> <td> <asp:TextBox id="txtLastName" Runat="server" Columns="30" CssClass="LabelText" /> </td> </tr> <tr> <td class="LabelText">Age: </td> <td> <asp:TextBox id="txtAge" Runat="server" Columns="30" CssClass="LabelText" /> </td> </tr> <tr> <td class="LabelText">Country: </td> <td> <asp:DropDownList id="ddCountry" 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 class="LabelText">Email Address: </td> <td> <asp:TextBox id="txtEmailAddress" Runat="server" Columns="30" CssClass="LabelText" /> </td> </tr> <tr> <td class="LabelText">Password: </td> <td> <asp:TextBox id="txtPassword1" Runat="server" TextMode="Password" Columns="30" CssClass="LabelText" /> <asp:RequiredFieldValidator id="rfvPassword1" Runat="server" ControlToValidate="txtPassword1" CssClass="AlertText" Display="Dynamic" EnableClientScript="True"> <img src="images/arrow_alert.gif"> Password Is Required </asp:RequiredFieldValidator> </td> </tr> <tr> <td class="LabelText">Re-enter Password: </td> <td> <asp:TextBox id="txtPassword2" Runat="server" TextMode="Password" Columns="30" CssClass="LabelText" /> <asp:RequiredFieldValidator id="rvPassword2" Runat="server" ControlToValidate="txtPassword2" CssClass="AlertText" Display="Dynamic" EnableClientScript="True"> <img src="images/arrow_alert.gif"> Re-Entered Password Is Required </asp:RequiredFieldValidator> <asp:CompareValidator ID="cvPassword2" runat="server" ControlToValidate="txtPassword2" ControlToCompare="txtPassword1" CssClass="AlertText" Display="Dynamic" EnableClientScript="True"> <img src="images/arrow_alert.gif"> Both Passwords Must Match </asp:CompareValidator> </td> </tr> <tr> <td colspan="2"> <br> <table align="center" width="50%"> <tr> <td align="center"> <asp:ImageButton id="btnSave" Runat="server" CausesValidation="True" ImageUrl="images/buttons/button_save.gif" /> </td> <td align="center"> <asp:ImageButton id="btnCancel" Runat="server" CausesValidation="False" ImageUrl="images/buttons/button_cancel.gif" /> </td> </tr> </table> </td> </tr> </table> </td> </tr> </table> </form> </body> </html>
| 