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. }
  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;
  28. for (var i = 0; i < len; i++) {
  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. });
  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.