You need to ensure data entered by a user is within a defined range—for example, between two numbers, currency values, dates, or alphabetic characters.
Add a RangeValidator
control
to
the .aspx
file for each
TextBox
control to be checked, set the minimum and
maximum acceptable values for the range, and 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 RangeValidator
control for each text box in
which the user must enter data within a specified range.
Set the control’s MinimumValue
and MaximumValue
attributes to the minimum and
maximum values for the valid range.
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-3 shows the user input form introduced in
Recipe 2.1 with normal, error-free
output. Figure 2-4 shows the same form with the
error message that appears on the form when the data entered into the
Age field falls outside a predetermined range. Example 2-4 shows the .aspx
file that
implements the form, and Example 2-2 and
Example 2-3 (see Recipe 2.1) show the companion
code-behind files.
To make sure a user enters data in a text box within a defined range,
place a RangeValidator
control on the form and
assign it the text box to be validated. To create the form shown in
Figure 2-3 and Figure 2-4, for example, we added an
asp:RangeValidator
control to the
.aspx
file that implements the form, and
assigned it to the Age text box to ensure the data entered is within
the range 18 to 99. You must place the validator on the form at the
exact location where you want the control’s error
message to be displayed, which in our case is just to the right of
the Age text box.
To assign a RangeValidator
control to a text box
or other control type, you must set its
ControlToValidate
attribute to the ID of the
control you wish to validate. In our example, the ID of the Age text
box is txtAge
:
<asp:RangeValidator id="rvAge" Runat="server"
ControlToValidate="txtAge"
CssClass="AlertText"
Display="Dynamic"
EnableClientScript="True"
MinimumValue="18"
MaximumValue="99"
Type="Integer">
<img src="images/arrow_alert.gif">
Age Must Be Between 18 and 99
</asp:RangeValidator>
To specify a valid range, you must set the
MinimumValue
and MaximumValue
attributes of the RangeValidator
control. In our
example, we have set the lowest acceptable value to
18
and the highest to 99
. These
values are inclusive, which means that ages 18 and 99 are both
acceptable.
<asp:RangeValidator id="rvAge" Runat="server" ControlToValidate="txtAge" CssClass="AlertText" Display="Dynamic" EnableClientScript="True"MinimumValue="18"
MaximumValue="99"
Type="Integer"> <img src="images/arrow_alert.gif"> Age Must Be Between 18 and 99 </asp:RangeValidator>
Our example focuses on using a range of two numbers, but you can also use a range of dates, times, currency values, alphabetic characters, or the like.
To dynamically change the minimum and maximum values, you can set them in the code-behind, as shown next. You might want to do this, for example, when determining the range on the fly.
Dim minAge As Integer Dim maxAge As Integer .. minAge = 18 maxAge = 99 rvAge.MinimumValue = minAge.ToString( ) rvAge.MaximumValue = maxage.ToString( ) int minAge; int maxAge; .. minAge = 18; maxAge = 99; rvAge.MinimumValue = minAge.ToString( ); rvAge.MaximumValue = maxAge.ToString( );
The error message that is to be output when validation fails is placed between the open and close tags:
<asp:RangeValidator id="rvAge" Runat="server" ControlToValidate="txtAge" CssClass="AlertText" Display="Dynamic" EnableClientScript="True" MinimumValue="18" MaximumValue="99" Type="Integer"><img src="images/arrow_alert.gif">
Age Must Be Between 18 and 99
</asp:RangeValidator>
The error message that will be output when a validation error occurs can also be set dynamically in the code-behind, which is something you might find useful when you have also set the maximum and minimum range values on the fly:
rvAge.Text = "<img src='images/arrow_alert.gif'> " & _ "Age Must Be Between " & minAge.ToString( ) & _ " and " & maxage.ToString( ) rvAge.Text = "<img src='images/arrow_alert.gif'> " + "Age Must Be Between " + minAge.ToString( ) + " and " + maxAge.ToString( );
If you want a text box to be a required field, add a
RequiredFieldValidator
control to the form as
well, which is what we have done in our example with the Age text
box:
<asp:TextBox id="txtAge" Runat="server" Columns="30" CssClass="LabelText" /><asp:RequiredFieldValidator id="rfvAge
Runat="server"
ControlToValidate="txtAge"
CssClass="AlertText"
Display="Dynamic"
EnableClientScript="True">
<img src="images/arrow_alert.gif">
Age Is Required
</asp:RequiredFieldValidator>
<asp:RangeValidator id="rvAge" Runat="server" ControlToValidate="txtAge" CssClass="AlertText" Display="Dynamic" EnableClientScript="True" MinimumValue="18" MaximumValue="99" Type="Integer"> <img src="images/arrow_alert.gif"> Age Must Be Between 18 and 99 </asp:RangeValidator>
All other aspects of the .aspx
and code-behind
are the same as for 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-4. Form with range validation (.aspx)
<%@ Page Language="vb" AutoEventWireup="false" Codebehind="CH02RangeValidationVB.aspx.vb" Inherits="ASPNetCookbook.VBExamples.CH02RangeValidationVB" %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Range Validation</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"> Range 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" /> <asp:RequiredFieldValidator id="rfvAge" Runat="server" ControlToValidate="txtAge" CssClass="AlertText" Display="Dynamic" EnableClientScript="True"> <img src="images/arrow_alert.gif"> Age Is Required </asp:RequiredFieldValidator><asp:RangeValidator id="rvAge" Runat="server"
ControlToValidate="txtAge"
CssClass="AlertText"
Display="Dynamic"
EnableClientScript="True"
MinimumValue="18"
MaximumValue="99"
Type="Integer">
<img src="images/arrow_alert.gif">
Age Must Be Between 18 and 99
</asp:RangeValidator>
</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" /> </td> </tr> <tr> <td class="LabelText">Re-enter Password: </td> <td> <asp:TextBox id="txtPassword2" Runat="server" TextMode="Password" Columns="30" CssClass="LabelText" /> </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>