How to allow only numbers in Textbox using Jquery?

Share Me
  •  
  •  
  •  
  • 1
  •  
  •  
  •  
  •  
  •  
  •  
  •  
    1
    Share
How to allow only numbers in Textbox using Jquery

Hello dev’s Today now in this example,I will show you how we can allow only number in textbox by using jquery. Just here we will simply and easy example of how to use validation for only number by using jquery.

So if we need to add jquery validation for our textbox input like textbox only need to accept only numbers values by using keypress event. So here if we can also do that by using keyup or keypress event to allow the only numeric values in our textbox input by using jquery.

So here I just want to write a very simple and easy full example. So from here you can understand about how it is working this example. So you can also check demo. let’s see the bellow full example:

Example 1 :

<!DOCTYPE html>
<html>
<head>
  <title>JQuery - Allow only numeric values in Textbox - CodingsPoint.com</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
   
<div class="container">
  <h1>JQuery - Allow only numeric values in Textbox - CodingsPoint.com</h1>
         
      <label>Enter Value:</label>
      <input type="text" name="myValue" class="allow-numeric" >
      <span class="error" style="color: red; display: none">* Input digits (0 - 9)</span>
    
</div>
    
<script type="text/javascript">
    
    $(document).ready(function() {
      $(".allow-numeric").bind("keypress", function (e) {
          var keyCode = e.which ? e.which : e.keyCode
               
          if (!(keyCode >= 48 && keyCode <= 57)) {
            $(".error").css("display", "inline");
            return false;
          }else{
            $(".error").css("display", "none");
          }
      });
    });
     
</script>
      
</body>
</html>

Example 2 :

<!DOCTYPE html>
<html>
<head>
  <title>JQuery - Allow only numeric values Textbox - CodingsPoint.com</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
</head>
<body>
   
<div class="container">
  <h1>JQuery - Allow only numeric values in Textbox - CodingsPoint.com</h1>
         
      <label>Enter Value:</label>
      <input type="text" name="myValue" class="allow-numeric" >
      <span class="error" style="color: red; display: none">* Input digits (0 - 9)</span>
    
</div>
    
<script type="text/javascript">
    
    $(document).ready(function() {
      $(".allow-numeric").on("keypress keyup blur",function (event) {    
           $(this).val($(this).val().replace(/[^\d].+/, ""));
            if ((event.which < 48 || event.which > 57)) {
                $(".error").css("display", "inline");
                event.preventDefault();
            }else{
            	$(".error").css("display", "none");
            }
        });
    });
     
</script>
      
</body>
</html>

Read Also : Laravel 8 Eloquent Global Scope Tutorial Example

I hope it will help you. Also you can follow us on Facebook

About code chef

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by code chef →