Create Numeric Validation TextBox Control In ASP.NET Using jQuery

In this blog I will explain about creating TextBox range control technique using jQuery.

It’s a very easy and useful concept to number validation and range in ASP.NET.

Now we will create a numeric validation control step by step.

Step 1: Open Visual Studio.

Step 2: Add Project.

Step 3: Add Web form with suitable name.



Figure 1: Web form

Step 4: Add ASP.NET control.

Now you are adding a button control and textbox control. Also write to code for textbox control as in the following.

Design code



Figure 2: Design

Design code and create jQuery function to TextBox and button control.

<%@ Page Title="" Language="C#" MasterPageFile="~/Master/Master.master" AutoEventWireup="true" CodeFile="TextRange.aspx.cs" Inherits="Jquery_Example_TextRange" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <style>
.label {
   font-size:larger;
}
.txtnvalue {
   width: 200px;
   font-size:x-large;
}
.error {
   color: blue;
}

</style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
$(document).ready(function () {
   $('.error').hide();
   $('.button').click(function (event) {
     var value = $('.txtnvalue').val();
     var len = value.length;
     var num = 0;
     var char = 0;
     var flag = 0;

for (var i = 0; i < len; i++) {

  char = value.charAt(i).charCodeAt(0);
  if (char < 48 || char > 57) {
    $('.error').show();
    flag = 1;
    event.preventDefault();
    break;
  }
 else {
    $('.error').hide();
  }
}
if (flag == 0) {
   num = parseInt(value);
   if (num < 18 || num > 55) {
     $('.error').show();
     $('.error').text('Enter Number between 18 to 55');
     event.preventDefault();
   }
}
});
});

    </script>
    <div>
        <table>
            <tr>
                <td class="label">Enter Number :</td>
                <td>
                    <asp:TextBox ID="txtnum" CssClass="txtnvalue" runat="server"></asp:TextBox>
                    <asp:Button ID="btn" CssClass="button" runat="server" Text="Click" Font-Bold="True"/>
                </td>
            </tr>
            <tr>
                <td></td>
                <td class="error">Insert Only Number</td>
            </tr>
        </table>
    </div>
</asp:Content>

Now run created code and check jQuery numeric control with browser as in the following screenshot:


Figure 3: Range validation


Figure 4: Numeric validation

In this blog we saw how to create jQuery numeric textbox validation control.