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

This tutorial 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 One – 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.

For more information on charcode or keycode please go through http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes

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

 

Example Two – 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>

 

Example Three – 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>

 

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 numbers or digits using jquery or javascript

That’s all. Thanks for your reading. Please do not forget to leave a comment.

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

Leave a Reply

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