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.