Allow only numeric values or digits in a TextBox using JavaScript or jQuery

The example, allow only numeric values or digits in a textbox using javascript or jquery, shows how to accept only numbers or digits in a textbox using JavaScript or jQuery. Sometimes we need to accept only numbers for a textbox instead of validation then it comes handy. In this type of validation user will not be able to type a non-numeric values.

This tutorial shows both validation and accepting only numbers in a textbox. This example also shows inline JavaScript function call with the input textbox. We will see each example one by one.

Example – using JavaScript

The javascript function checks for charcode when a key is pressed in the keyboard and it check if it does not fall between 48 and 57 then it is other than digit. So we show the error message to the user.

We call the javascript function onkeypress javascript event. You can also call this function onkeyup javascript function.

Here is the source code example for allow only numeric values or digits in a textbox using javascript

<!doctype html>
<html>
<head>

<title>Allow only digits using JavaScript or jQuery</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript">
function checkOnlyDigits(e) {
e = e ? e : window.event;
var charCode = e.which ? e.which : e.keyCode;
if (charCode < 48 || charCode > 57) {
document.getElementById('errorMsg').style.display = 'block';
document.getElementById('errorMsg').style.color = 'red';
document.getElementById('errorMsg').innerHTML = 'OOPs! Only digits allowed.';
return false;
} else {
document.getElementById('errorMsg').style.display = 'none';
return true;
}
}
</script>

</head>
<body>

<div>
<h2>Allow only digits using JavaScript or jQuery</h2>
</div>

<div id="content">

<label>JavaScript Example</label><br/>
<input type="text" name="number1" id="number1" onkeypress="return checkOnlyDigits(event)"/>
<div id="errorMsg"></div>

</div>

</body>
</html>

Here in the above code we have only one input box and on onkeypress JavaScript function we implement the validation logic. We get the char code value for the key which is pressed and check the char code value between 48 and 57 and accordingly we show the error message to the end user.

Example – using jQuery

Below example uses jQuery to check and replace the non-digit values. The below jQuery function is fired on the keyup event.

$("#number3").keyup(function(event) {

The function here just test for the digits and if the value is not a digit then it just replaces that value.

The below logic tells if user presses the Delete (keyCode – 46) or Backspace (keyCode – 8), then do nothing

if ( event.keyCode == 46 || event.keyCode == 8 ) {

Source Code

<!doctype html>
<html>
<head>

<title>Allow only digits using JavaScript or jQuery</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#number3").keyup(function(event) {
if ( event.keyCode == 46 || event.keyCode == 8 ) {
// let it happen, don't do anything
} else if (/\D/g.test(this.value)) {
// Filter non-digits from input value.
this.value = this.value.replace(/\D/g, '');
}
});
});
</script>
</head>
<body>

<div>
<h2>Allow only digits using JavaScript or jQuery</h2>
</div>

<div id="content">

<label>jQuery Example</label><br/>
<input type="text" name="number3" id="number3"/>

</div>

</body>
</html>

In the above source code for input box we call the keyup event function and implement the logic for validation.

So here we do nothing if it is a backspace or delete key.

Then we consider the input values which are only numeric.

Example – Inline JavaScript

In this below example we have input textbox and onkeyup javascript event we have written inline logics. So we don’t have any external function attached to this onkeyup event. The logic inside the onkeyup event just test the input value and if it is not digit then just replaces that value.

<!doctype html>
<html>
<head>

<title>Allow only digits using JavaScript or jQuery</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>

<div>
<h2>Allow only digits using JavaScript or jQuery</h2>
</div>

<div id="content">

<label>Inline Example</label><br/>
<input type="text" name="number2" id="number2" onkeyup="if(/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

</div>

</body>
</html>

In the above source code we have seen how to write inline function to replace unwanted characters from keyboard input.

Putting all together

<!doctype html>
<html>
<head>

<title>Allow only digits using JavaScript or jQuery</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript">
function checkOnlyDigits(e) {
e = e ? e : window.event;
var charCode = e.which ? e.which : e.keyCode;
if (charCode > 31 && (charCode < 48 || charCode > 57)) {
document.getElementById('errorMsg').style.display = 'block';
document.getElementById('errorMsg').style.color = 'red';
document.getElementById('errorMsg').innerHTML = 'OOPs! Only digits allowed.';
return false;
} else {
document.getElementById('errorMsg').style.display = 'none';
return true;
}
}
</script>

<script type="text/javascript">
$(document).ready(function() {
$("#number3").keyup(function(event) {
if ( event.keyCode == 46 || event.keyCode == 8 ) {
// let it happen, don't do anything
} else if (/\D/g.test(this.value)) {
// Filter non-digits from input value.
this.value = this.value.replace(/\D/g, '');
}
});
});
</script>
</head>
<body>

<div>
<h2>Allow only digits using JavaScript or jQuery</h2>
</div>

<div id="content">

<label>JavaScript Example</label><br/>
<input type="text" name="number1" id="number1" onkeypress="return checkOnlyDigits(event)"/>
<div id="errorMsg"></div>

<p>&nbsp;</p>

<label>Inline Example</label><br/>
<input type="text" name="number2" id="number2" onkeyup="if(/\D/g.test(this.value)) this.value = this.value.replace(/\D/g,'')">

<p>&nbsp;</p>

<label>jQuery Example</label><br/>
<input type="text" name="number3" id="number3"/>

</div>

</body>
</html>

Final output

allow only numeric values or digits in atextbox using javascript or jquery

Hope you find the idea how to restrict user from inputting unwanted values by reading example allow only numeric values or digits in a textbox using javascript or jquery.

That’s all. Thanks for your reading.

Soumitra Roy Sarkar

I am a professional Web developer, Enterprise Application developer, Software Engineer and Blogger. Connect me on JEE Tutorials Twitter Facebook  Google Plus Linkedin Or Email Me

Leave a Reply

Your email address will not be published. Required fields are marked *