ItSolutionStuff.com

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

By Hardik Savani • July 20, 2023
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

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

📺 Subscribe on YouTube

We Are Recommending You

JQuery Moment Add Year to Date Example

Read Now →

JQuery Moment Get Current Date Example

Read Now →

How to Get Number of Characters in a String in JQuery?

Read Now →

How to Get Selected Radio Button Value in JQuery?

Read Now →

How to Change Date Format in JQuery?

Read Now →

How to Disable Right Click Menu using JQuery?

Read Now →

How to Get Attribute Value in JQuery?

Read Now →

How to Remove undefined Value from Array in JQuery?

Read Now →

How to Get Max Attribute Value in JQuery?

Read Now →

Automatically Scroll to Bottom of Div JQuery Example

Read Now →

Check and Uncheck All Checkbox using JQuery Example

Read Now →

How to Allow Only One Checkbox Checked at a Time in JQuery?

Read Now →

How to Convert Line Breaks to br in jQuery ?

Read Now →

How to Check Object is Empty or Not in JQuery?

Read Now →