How to Allow Only 10 Numbers in a Textbox using JQuery?

By Hardik Savani July 20, 2023 Category : jQuery

In this example, i will show you 10 digit mobile number validation in jquery using regular expression. we just allow only 10 digit number validation in jquery. user can only enter 10 numbers in textbox using jquery for phone number or mobile validation. it means jquery allow only 10 digits.

Whenever you are working with mobile number and phone number at that time you most of need to restrict user to enter only numbers in textbox using jquery. we can do it that thing multiple way. i will give you simple two example of how to restrict user to type 10 digit numbers in input element.

One it using pattern attribute in html and another is maxlength and jquery keypress event. So you can just see both example. You can see also preview bellow. You can use anyone as you want.

So let's see both example, that will help you to set validation for mobile number:

Example 1:

<!DOCTYPE html>
<html>
<head>
    <title>Allow only 10 numbers in textbox using Jquery - ItSolutionStuff.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
   
<form>
    <h1>Allow only 10 numbers in textbox using Jquery - ItSolutionStuff.com</h1>
    <input type="text" name="phone" placeholder="Phone..." pattern="[1-9]{1}[0-9]{9}">
  
    <button type="submit">Submit</button>
</form>
  
</body>
</html>

Example 2:

Read Also: JQuery Moment Add Seconds to Datetime Example
<!DOCTYPE html>
<html>
<head>
    <title>Allow only 10 numbers in textbox using Jquery - ItSolutionStuff.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body> 
    
<form>
  <h1>Allow only 10 numbers in textbox using Jquery - ItSolutionStuff.com</h1>
  <input type="text" name="phone" placeholder="Phone..." maxlength="10" class="phone">
     
  <button type="submit">Submit</button>
</form>
    
</body>
    
<script type="text/javascript">
  $('.phone').keypress(function(e) {
      var arr = [];
      var kk = e.which;
   
      for (i = 48; i < 58; i++)
          arr.push(i);
   
      if (!(arr.indexOf(kk)>=0))
          e.preventDefault();
  });
</script>
</html>

You can see preview:

I hope it can help you...

Tags :
Previous

Laravel Eloquent WhereNotIn Query Example
Next

How to Allow Only 4 Digits Numbers in Textbox using JQuery?

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares