Now, we will discuss about How to Use Rangevalidator control in ASP.NET 4.5. Rangevalidator control is used to check if the value is within a specified range of values. For example, Rangevalidator can be used to check if the age between 1 until 100.
In the codesnippet below, TextBox txtAge get age of the person. If User fill with any number that isn’t between 1 – 100 the validation fails. The minimum and maximum value for the age is specified by MinimumValue and MaximumValue properties. Since, Age is an integer, the Type is specified as integer. Write the code below:
|
1 2 3 4 5 6 |
<asp:TextBox ID="txtAge" runat="server"></asp:TextBox> <asp:RangeValidator ID="RangeValidator1" runat="server" ErrorMessage="Age must be between 1 & 100" MinimumValue="1" MaximumValue="100" ControlToValidate="txtAge" Type="Integer" > </asp:RangeValidator> |
Properties for Rangevalidator control:
- Type – Specifies the data type of the value to check. Data types supported include Currency, Date, Double, Integer and String.
- MinimumValue – Minimum value that allowed
- MaximumValue – Max value allowed in that field
The Rangevalidator only checks if the data is within the allowed range. If you wanna check for a required field, use RequiredFieldValidator. In the Age field, I am using both RequiredFieldValidator & RangeValidator. In this example I am using the Display property. If the Display property is not set, or, if it is set to static, then the error message will be rendered, with style visibility:hidden. Then the error message will always occupy the gap on the screen even if the validation passes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<table> <tr> <td> <b>Age</b> </td> <td> :<asp:TextBox ID="txtAge" runat="server" Width="150px"> </asp:TextBox> <asp:RangeValidator ID="RangeValidatorAge" runat="server" ErrorMessage="Age must be between 1 & 100" MinimumValue="1" MaximumValue="100" ControlToValidate="txtAge" Type="Integer" ForeColor="Red" Display="Dynamic"> </asp:RangeValidator> <asp:RequiredFieldValidator ID="RequiredFieldValidatorAge" runat="server" ErrorMessage="Age is required" ControlToValidate="txtAge" ForeColor="Red" Display="Dynamic" > </asp:RequiredFieldValidator> </td> </tr> <tr> <td> <b>Date Available</b> </td> <td> :<asp:TextBox ID="txtDateAvailable" runat="server" Width="150px"> </asp:TextBox> <asp:RangeValidator ID="RangeValidatorDateAvailable" runat="server" ErrorMessage="Date must be between 01/01/2012 & 31/12/2012" MinimumValue="01/01/2012" MaximumValue="31/12/2012" ControlToValidate="txtDateAvailable" Type="Date" ForeColor="Red"> </asp:RangeValidator> </td> </tr> <tr> <td colspan="2"> <asp:Button ID="btnSave" runat="server" Text="Save" Width="100px" onclick="btnSave_Click" /> </td> </tr> <tr> <td colspan="2"> <asp:Label ID="lblStatus" runat="server" Font-Bold="true"> </asp:Label> </td> </tr> </table> |
This pushes “Age is Required” error message to the correct. To correct this we’ve got set Display=”Dynamic”. This renders the error message with style display:none. If a tag has this style, it’ll not occupy space when not visible.
Code-Behind page code:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
protected void btnSave_Click(object sender, EventArgs e) { if (Page.IsValid) { lblStatus.ForeColor = System.Drawing.Color.Green; lblStatus.Text = "Data Saved successfully"; } else { lblStatus.ForeColor = System.Drawing.Color.Red; lblStatus.Text = "Validation Failed! Data not saved"; } } |
Display property is supported by all validation controls
- None – Error message not rendered and displayed next to the control. used to show the error message only within the ValidationSummary control
- Static – The error message is displayed next to the control if validation fails. space is reserved on the page for the message although validation succeeds. The span tag is rendered with style visibility:hidden
- Dynamic – The error message is displayed next to the control if validation fails. space isn’t reserved on the page for the message if the validation succeeds. The span tag is rendered with style display:none.