Allow only 10 numbers in textbox using Jquery

By Hardik Savani | January 7, 2020 | 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:

<!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 : jQuery


Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: