Jquery - How to allow only 4 digit numbers in html textbox?

By Hardik Savani | January 7, 2020 | Category : jQuery


In this post, we will learn allow only 4 digits in textbox jquery html. we will use regex to allow only 4 digits. we just allow only 4 digits in input box using html jquery. you can use this validation with 2 digits, 3 digits, 8 digits etc.

So basically, if you need to to restrict user to enter only 4 numbers in textbox using jquery then this example will help you.

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 4 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 4 numbers in textbox using Jquery - ItSolutionStuff.com</h1>

<input type="text" name="phone" placeholder="Phone..." pattern="[1-9]{1}[0-9]{3}">

<button type="submit">Submit</button>

</form>

</body>

</html>

Example 2:

<!DOCTYPE html>

<html>

<head>

<title>Allow only 4 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 4 numbers in textbox using Jquery - ItSolutionStuff.com</h1>

<input type="text" name="phone" placeholder="Phone..." maxlength="4" 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>

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: