Open In App

How to allow only 10 numbers in a textbox using jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn about how to allow only 10 numbers in a textbox using jQuery

jQuery is an open-source JavaScript library that simplifies the interactions between an HTML/CSS document, Given an HTML document containing a textbox input element, the task is to allow the input of strictly 10 numeric digits or numbers in that particular textbox using jQuery. There are two approaches that can be taken to accomplish this task:

Approach 1: Using the pattern attribute in HTML. Define the following regular expression for the pattern attribute:

Regular expression:

\d{10}

Explanation: The \d matches a digit or a single character in the range between 0 and 9 (both inclusive) and {10} matches the same token exactly ten times.

In this approach, if the input in the textbox does not match the regular expression in the pattern attribute, a tooltip is shown which specifies that the requested format should be matched. On the other hand, if it does match then an alert message is displayed stating that the form has been successfully submitted.

Example: In this example, we will use the above approach.

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- jQuery -->
    <script src=
    </script>
    <title>Allow only 10 numbers in textbox using jQuery</title>
    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }
 
        #paraID {
            font-weight: bold;
            font-size: 1.5rem;
        }
 
        h1 {
            color: green;
            font-size: 2.5rem;
        }
 
        button {
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <form onsubmit="alert('Submitted successfully')">
        <h1>GeeksforGeeks</h1>
        <p id="paraID">
            jQuery - Allow only 10 numbers in textbox
        </p>
 
        <input type="text"
               name="numbers"
               placeholder="Enter ten digits..."
               pattern="\d{10}" required
               title="Ten numbers"
               autocomplete="off" />
        <button type="submit">Submit</button>
    </form>
</body>
</html>


Output:

>

Approach 2: Using jQuery methods such as keypress. Firstly, create an array that stores all the ASCII codes or values of the digits 0 (ASCII value 48) through 9 (ASCII value 57) so that the input in the textbox can be validated later on. Next, set the max length of the input to 10 using maxlength attribute of the input tag. 

 The event.which property in jQuery detects what character from the keyboard is being entered in the textbox. After that, check whether the ASCII code of each input character is part of the ASCII codes in the array. If the ASCII code of the character is in the array, the input character is valid (0-9). Else, prohibit the character from being entered in the textbox by using preventDefault().

Lastly, we create a function with all the functionalities discussed above and bind this function to a keypress method which is then bound to the textbox. Attach the submit method to the form to check whether the given input in the textbox is 10 in length. If it matches, the form can be submitted otherwise an alert message is shown stating that the input should contain 10 numbers.

Example: In this example, we will use the above approach.

HTML




<!DOCTYPE html>
<html>
<head>
    <!-- jQuery -->
    <script src=
    </script>
    <title>Allow only 10 numbers in textbox using jQuery</title>
    <!-- Basic inline styling -->
    <style>
        body {
            text-align: center;
        }
 
        #paraID {
            font-weight: bold;
            font-size: 1.5rem;
        }
 
        h1 {
            color: green;
            font-size: 2.5rem;
        }
 
        button {
            cursor: pointer;
        }
    </style>
</head>
 
<body>
    <form>
        <h1>GeeksforGeeks</h1>
        <p id="paraID">jQuery - Allow only 10 numbers in textbox</p>
 
        <input type="text"
               name="numbers"
               placeholder="Enter ten digits..."
               maxlength="10"
               class="textbox"
               autocomplete="off" required />
        <button type="submit">
            Submit
        </button>
    </form>
    <script type="text/javascript">
        $(".textbox").keypress(function (e) {
            let myArray = [];
            for (i = 48; i < 58; i++) myArray.push(i);
            if (!(myArray.indexOf(e.which) >= 0)) e.preventDefault();
        });
        $("form").submit(function (e) {
            if ($(".textbox").val().length === 10) {
                alert("Submitted successfully!");
            } else {
                e.preventDefault();
                alert("Enter ten numbers");
            }
        });
    </script>
</body>
</html>


Output:



Last Updated : 02 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads