How to Only Allow Numbers in a Text Box using jQuery

This tutorial explains how to only allow numbers and decimal values in the textbox using jQuery. I have kept this article very simple so that anyone can implement basic validation of entering the numeric values in the textbox on their web page.

Best practise is to do validation on both the side .i.e on server-side (Php, Asp.net C# etc) and on client side(JavaScript/Jquery).

So today we learn how to restrict the user only to enter numeric and decimal values in the input textbox field. i.e ( only allow one dot using jquery) whether user drag, drop, copy, paste or enter manually. Let’s head to the coding part.

jQuery-Allow-Numbers-and-Decimal-only-in-Textbox

Steps to allow only numbers and dot (decimal/ float)

1- Download includes jquery library

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
</head>

2- Download includes jquery library.

<table>
<tr>
<td><strong>Integer value:</strong></td>
<td>
<input type="text" name="numeric" class='allow_numeric'>
<div>Allow only numeric values (without decimal) </div>
</td>
</tr>
<tr>
<td> <strong>Decimal value :</strong></td>
<td>
<input type="text" name="numeric" class='allow_decimal'>
<div>Allow numeric values with decimal</div>
</td>
</tr>
</table>

3- jQuery: code to allow numeric and decimal values

Here in our 1st textbox, we added a class named allow_numeric. On its input event will restrict numbers characters only.

To get the textbox value we use the jQuery Val() method. And we used regex i.e /D/g which restricts the user to allow numeric values only.

<script>
$(document).ready(function(){


 $(".allow_numeric").on("input", function(evt) {
   var self = $(this);
   self.val(self.val().replace(/\D/g, ""));
   if ((evt.which < 48 || evt.which > 57)) 
   {
     evt.preventDefault();
   }
 });

 $(".allow_decimal").on("input", function(evt) {
   var self = $(this);
   self.val(self.val().replace(/[^0-9\.]/g, ''));
   if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57)) 
   {
     evt.preventDefault();
   }
 });

});

</script>

Full Code

<html>
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<style>
input {
  float: left;
  width: 100%;
  padding-bottom: 4px;
  padding-top: 4px;
  margin-top: 20px;
  border-radius: 3px;
  border: 1px solid #222;
  padding-left: 5px;
}

</style>
</head>
<body>
<table>
  <tr>
    <td><strong>Int value:</strong></td>
    <td>
      <input type="text" name="numeric" class='allow_numeric'>
      <div>Allow only numeric values (without decimal) </div>
    </td>
  </tr>
  <tr>
    <td> <strong>Decimal Value :</strong></td>
    <td>
      <input type="text" name="numeric" class='allow_decimal'>
      <div>Allow numeric values with decimal</div>
    </td>
  </tr>
</table>


<script>
$(document).ready(function(){


 $(".allow_numeric").on("input", function(evt) {
   var self = $(this);
   self.val(self.val().replace(/\D/g, ""));
   if ((evt.which < 48 || evt.which > 57)) 
   {
     evt.preventDefault();
   }
 });

 $(".allow_decimal").on("input", function(evt) {
   var self = $(this);
   self.val(self.val().replace(/[^0-9\.]/g, ''));
   if ((evt.which != 46 || self.val().indexOf('.') != -1) && (evt.which < 48 || evt.which > 57)) 
   {
     evt.preventDefault();
   }
 });

});

</script>
</body>
</html>

Here we explained how on the client-side using jQuery we restrict users to enter only numbers or decimal values in a textbox. We have used JavaScript regex to validate textboxes.

Good luck and I hope this article can be useful. See you in the next article…

If you enjoyed this tutorial and learned something from it, please consider sharing it with our friends and followers! Also like to my facebook page to get more awesome tutorial each week!