How to allow only 10 digit number validation in Jquery?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
How to allow only 10 digit number validation in Jquery

Today now in this tutorial, I will tell you about how we can allow only 10 numbers in textbox by using jquery. Here we will just allow only 10 digit number validation by using jquery. Here we can give a validation a user only 10 digit numbers in textbox by using jquery for phone number or mobile validation.

So now here I will give you four simple example of how to restrict any user to give more then 10 digit numbers any input element. Now we can do it that thing by multiple way. So here i will share with you different example of a validation only 10 digit validation in html.

Here one of this by using pattern attributes in html and then another is maxlength and then jquery keypress event. So here we can just see both example. Then we can also see preview bellow. Now You can use anyone as you want.

Here the blow the example allows only 10 numbers in textbox by using jquery.

Example 1

<!DOCTYPE html>
<html>
<head>
    <title>How to allow only 10 digit number validation in Jquery? - codingspoint.com</title>
</head>
<body>
<form>
    <h1>How to allow only 10 digit number validation in Jquery? - nicesnippets.com</h1>
    <label>Numbers</label>
    <input type="text" name="num" placeholder="Enter numbers" pattern="\d{10}" maxlength="10">
    <button type="submit">Submit</button>
</form>
</body>
</html>

Example 2

<!DOCTYPE html>
<html>
<head>
    <title>How to allow only 10 digit number validation in Jquery? - codingspoint.com</title>
</head>
<body>
<form>
    <h1>How to allow only 10 digit number validation in Jquery? - nicesnippets.com</h1>
    <label>Numbers</label>
    <input type="text" name="num" placeholder="Enter numbers" pattern="[1-9]{1}[0-9]{9}" maxlength="10">
    <button type="submit">Submit</button>
</form>
</body>
</html>

Example 3

<!DOCTYPE html>
<html>
<head>
    <title>How to allow only 10 digit number validation in Jquery? - nicesnippets.com</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<form>
    <h1>How to allow only 10 digit number validation in Jquery? - codingspoint.com</h1>
    <label>Moblie No</label>
    <input type="text" name="moblie_no" class="moblie-no" placeholder="Enter numbers">
  
    <button type="submit">Submit</button>
</form>
</body>
<script type="text/javascript">
   $("input[name=moblie_no]").attr("maxlength", "10");
  $('.moblie-no').keypress(function(e) {
      var arr = [];
      var kk = e.which;
   
      for (i = 48; i < 58; i++)
          arr.push();
   
      if (!(arr.indexOf(kk)>=0))
          e.preventDefault();
  });
</script>
</html>

Read Also : Laravel 8 Eloquent Global Scope Tutorial Example

I hope it will help you. Also you can follow us on Facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →