RangeValidator control in ASP.NET

      No Comments on RangeValidator control in ASP.NET

RangeValidator validation control in ASP.NET is used to validate whether the value of a control is in a given range. It can validate Currency, Date, Double, Integer and String value.

Properties of RangeValidator control

Property Uses
ControlToValidate It takes ID of the control you want to validate
Type It specifies the type of data you want to validate. It can be set to “Currency”, “Date”, “Double”, “Integer” or “String”
MinimumValue It specifies the minimum value of the range
MaximumValue It specifies the maximum value of the range
ErrorMessage It is used to set the error message to be displayed when validation fails

Example 1: Validating an Integer type value

<asp:TextBox
     ID="txtAge"
     runat="server"
     CssClass="textbox">
</asp:TextBox>

<asp:RangeValidator
     ID="RangeValidator1"
     runat="server"
     ControlToValidate="txtAge"
     Type="Integer"
     MinimumValue="18"
     MaximumValue="30"
     ErrorMessage="(Age should be between 18 and 30)"
     ForeColor="Red">
</asp:RangeValidator>

Here, we are validating an age field that should accept value between 18 and 30. For this, first we set the Type to Integer and then we set MinimumValue to 18 and MaximumValue value to 30. We also set ErrorMessage and ForeColor.

Example 2: Validating a Date type value

<asp:TextBox
     ID="txtDOB"
     runat="server"
     CssClass="textbox"
     Text="MM/DD/YYYY">
</asp:TextBox>

<asp:RangeValidator
     ID="RangeValidator2"
     runat="server"
     ControlToValidate="txtDOB"
     Type="Date"
     MinimumValue="01/31/1985"
     MaximumValue="01/31/2013"
     ErrorMessage="(Invalid Date)"
     ForeColor="Red">
</asp:RangeValidator>

Here, we want to validate a field that should accept date in a given range. As in the first example, first we need to set Type and then MinimumValue and MaximumValue of the RangeValidator. We set Type to Date as we are validating a date and then we set range of date using MinimumValue and MaximumValue.

Note: Like in CompareValidator control, RangeValidator control also does not displays error if the control is blank. So, we should use a RequiredFieldValidator with RangeValidator to validate blank values.

Complete HTML:

<!DOCTYPE html>
<html>
     <head runat="server">
     <title>RangeValidator control example</title>
     <style type="text/css">
          input.textbox
          {
               border: 1px solid #BABABA;
               color: #212121;
               font-family: "Segoe UI Light";
               font-size: 100%;
               padding:4px 8px;
               width:200px;
               height:22px;
               margin-bottom:5px;
          }

          input.button
          {
               background-color: Navy;
               color: #FFFFFF;
               font-family: "Segoe UI Light";
               border: 0 none;
               font-size: 110%;
               height: 2.142em;
               min-width: 6em;
               line-height: 142%;
               width:100px;
               margin-top:5px;
          }

          label
          {
               color: #606060;
               float: left;
               font-family: "Segoe UI";
               font-size: 80%;
               padding-bottom: 4px;
               padding-top: 10px;
               text-align: left;
               width:150px;
          }

          .clear
          {
               clear:both;
          }
     </style>
</head>
<body>
     <form id="form1" runat="server">
          <div>
               <asp:Label
                    ID="lblAge"
                    runat="server"
                    Text="Age"
                    AssociatedControlID="txtAge">
               </asp:Label>
          </div>
          <div style="clear:both;"></div>
          <div>
               <asp:TextBox
                    ID="txtAge"
                    runat="server"
                    CssClass="textbox">
               </asp:TextBox>

               <asp:RequiredFieldValidator
                    ID="RequiredFieldValidator1"
                    runat="server"
                    ControlToValidate="txtAge"
                    ErrorMessage="(Required)"
                    ForeColor="Red">
               </asp:RequiredFieldValidator>

               <asp:RangeValidator
                    ID="RangeValidator1"
                    runat="server"
                    ControlToValidate="txtAge"
                    Type="Integer"
                    MinimumValue="18"
                    MaximumValue="30"
                    ErrorMessage="(Age should be between 18 and 30)"
                    ForeColor="Red">
               </asp:RangeValidator>
          </div>
          <div style="clear:both;"></div>
          <div>
               <asp:Label
                    ID="lblDOB"
                    runat="server"
                    Text="Date of Birth"
                    AssociatedControlID="txtDOB">
               </asp:Label>
          </div>
          <div style="clear:both;"></div>
          <div>
               <asp:TextBox
                    ID="txtDOB"
                    runat="server"
                    CssClass="textbox"
                    Text="MM/DD/YYYY">
               </asp:TextBox>

               <asp:RequiredFieldValidator
                    ID="RequiredFieldValidator2"
                    runat="server"
                    ControlToValidate="txtDOB"
                    ErrorMessage="(Required)"
                    ForeColor="Red">
               </asp:RequiredFieldValidator>

               <asp:RangeValidator
                    ID="RangeValidator2"
                    runat="server"
                    ControlToValidate="txtDOB"
                    Type="Date"
                    MinimumValue="01/31/1985"
                    MaximumValue="01/31/2013"
                    ErrorMessage="(Invalid Date)"
                    ForeColor="Red">
               </asp:RangeValidator>
          </div>
          <div style="clear:both;"></div>
          <div>
               <asp:Button
                    ID="btnSubmit"
                    runat="server"
                    Text="Submit"
                    CssClass="button"
                    onclick="btnSubmit_Click" />
          </div>
     </form>
</body>
</html>

Error messages are displayed as following when age and date of birth does not fall in the given range and validation fails

RangeValidator control

Leave a Reply

Your email address will not be published. Required fields are marked *