Post
Ask Question

Create Numeric Validation TextBox Control In ASP.NET 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.

  1. <%@ Page Title="" Language="C#" MasterPageFile="~/Master/Master.master" AutoEventWireup="true" CodeFile="TextRange.aspx.cs" Inherits="Jquery_Example_TextRange" %>  
  2. <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content>  
  3. <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">  
  4.     <style>  
  5. .label {  
  6.    font-size:larger;  
  7. }  
  8. .txtnvalue {  
  9.    width: 200px;  
  10.    font-size:x-large;  
  11. }  
  12. .error {  
  13.    color: blue;  
  14. }  
  15.   
  16. </style>  
  17.     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>  
  18.     <script>  
  19. $(document).ready(function () {  
  20.    $('.error').hide();  
  21.    $('.button').click(function (event) {  
  22.      var value = $('.txtnvalue').val();  
  23.      var len = value.length;  
  24.      var num = 0;  
  25.      var char = 0;  
  26.      var flag = 0;  
  27.   
  28. for (var i = 0; i < len; i++) {  
  29.   
  30.   char = value.charAt(i).charCodeAt(0);  
  31.   if (char < 48 || char > 57) {  
  32.     $('.error').show();  
  33.     flag = 1;  
  34.     event.preventDefault();  
  35.     break;  
  36.   }  
  37.  else {  
  38.     $('.error').hide();  
  39.   }  
  40. }  
  41. if (flag == 0) {  
  42.    num = parseInt(value);  
  43.    if (num < 18 || num > 55) {  
  44.      $('.error').show();  
  45.      $('.error').text('Enter Number between 18 to 55');  
  46.      event.preventDefault();  
  47.    }  
  48. }  
  49. });  
  50. });  
  51.   
  52.     </script>  
  53.     <div>  
  54.         <table>  
  55.             <tr>  
  56.                 <td class="label">Enter Number :</td>  
  57.                 <td>  
  58.                     <asp:TextBox ID="txtnum" CssClass="txtnvalue" runat="server"></asp:TextBox>  
  59.                     <asp:Button ID="btn" CssClass="button" runat="server" Text="Click" Font-Bold="True"/>  
  60.                 </td>  
  61.             </tr>  
  62.             <tr>  
  63.                 <td></td>  
  64.                 <td class="error">Insert Only Number</td>  
  65.             </tr>  
  66.         </table>  
  67.     </div>  
  68. </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.