Allow Only Numeric Values or Digits in a TextBox using JavaScript or jQuery

Introduction

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 or input field using JavaScript or jQuery. Sometimes you need to accept only numbers for a textbox or input field instead of validating the value in the textbox or input field. 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 or input field. This example also shows inline JavaScript function call with the input field or textbox. You will see here each example one by one.

Prerequisites

Knowledge of JavaScript and jQuery

I will create here examples with JavaScript and jQuery. JavaScript will have two examples – external function call and inline function call. jQuery has only 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 I show the error message to the user.

External Function

I called the javascript function onkeypress javascript event/function. 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 > 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>
</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 you have only one input box and on onkeypress JavaScript function I have implemented the validation logic. I get the char code value for the key which is pressed and check the char code value between 48 and 57 and accordingly I show the error message to the end user.

Inline Function

In this below example I have input textbox and onkeyup javascript event I have written inline logics. So I 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 you have seen how to write inline function to replace unwanted characters from keyboard input.

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 for jQuery is given below:

<!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 I call the keyup event function and implement the logic for validation.

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

Then I consider the input values which are only numeric.

Testing the Application

Running the above code you will see a page similar to the below image. The error message you will see for the first input box if you try to type characters instead of digits.

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.

Source Code

Download

Leave a Reply

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