Enter Only Numbers in Textbox using Javascript Example

JavaScript

Nicesnippets

301

30-01-2020


Hi Dev,

In this blog, I will explain you how to enter only numeric value in javascript. You want to allow only numeric values to be entered into the textbox.

You entered only numeric value not a string. If user enters alphabetic character it should warn the error. This textbox accept only numeric value.Here,I will give a full example which blocks all non numeric input from being entered into the text-field.

In this example i will use first example in isNaN() and second example in match pattern.

Example 1

<!DOCTYPE html>

<html>

<head>

<title>enter only numbers in textbox using javascript example - nicesnippets.com</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />

</head>

<body>

<form>

<div class="row mt-5">

<div class="col-md-6 offset-3">

<div class="card">

<div class="card-header">

<h3 class="text-center"><strong>Enter Only Numbers in Textbox using Javascript Example - NiceSnippets.com</strong></h3>

</div>

<div class="card-body">

<div class="alert alert-danger" id="alert" style="display: none;">Please Enter Numeric Value</div>

<div class="form-group">

<label><strong>Phone Number</strong></label>

<input type="text" name="num" placeholder="Enter Only Number..." id="num" class="form-control"\>

</div>

<div class="form-group text-center">

<button class="btn btn-success" onclick="getNameValue(event);">Save</button>

</div>

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

function getNameValue(e){

e.preventDefault();

var num = document.getElementById("num").value;

if (isNaN(num)) {

document.getElementById("alert").style.display = "block";

setTimeout(function(){

document.getElementById("alert").style.display = "none";

}, 3000);

}else{

alert('is number');

}

}

</script>

</body>

</html>

Example 2

<!DOCTYPE html>

<html>

<head>

<title>enter only numbers in textbox using javascript example - nicesnippets.com</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />

</head>

<body>

<form>

<div class="row mt-5">

<div class="col-md-6 offset-3">

<div class="card">

<div class="card-header">

<h3 class="text-center"><strong>Enter Only Numbers in Textbox using Javascript Example - NiceSnippets.com</strong></h3>

</div>

<div class="card-body">

<div class="alert alert-danger" id="alert" style="display: none;">Please Enter Numeric Value</div>

<div class="form-group">

<label><strong>Phone Number</strong></label>

<input type="text" name="num" placeholder="Enter Only Number..." id="num" class="form-control" onchange="getNameValue(event);">

</div>

</div>

</div>

</div>

</div>

</form>

<script type="text/javascript">

function getNameValue(e) {

e.preventDefault();

var num = document.getElementById("num").value;

if (!num.match(/^\d+/)) {

document.getElementById("alert").style.display = "block";

setTimeout(function(){

document.getElementById("alert").style.display = "none";

}, 3000);

}else{

alert('is number');

}

}

</script>

</body>

</html>

It will help you....