2.2.1 Problem 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 . 2.2.2 Solution 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. Figure 2-3. Form with range validation output ”normal 
Figure 2-4. Form with range validation output ”with error message 
2.2.3 Discussion 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. 2.2.4 See Also Recipe 2.1 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>
| 
