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.
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.
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.
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>