How to check that the entered value in the input field is just numbers?

Question

I was wondering what the best and easiest way is to ensure that the value the user enters into the input field is numeric on the web page? either notify them that they are not allowed when they are editing them, or do not allow them to enter non-numeric values ​​to begin with.

any ideas?

thanks

Answer 1

If only integer values ​​are valid, I would try something like:

if( isNaN(parseInt(str, 10)) ) { //error } 

EDIT: @ M28 and @unomi are right, this may allow some inputs that are not actually numbers. M28 posted a really good solution in the comments:

 if( ! (parseInt(str, 10).toString() == str) ) { //error } 

Answer 2

You can use regex ^ \ d * $

 var re = new RegExp("^\d*$"); if ($("#someinput").val().match(re)) { alert("Only numbers"); } else { alert("No match"); } ^ tells the expression to start matching from the beginning of the string. \d is a match for numbers which is the same as [0-9] (any number from 0 to 9) * tells to match all numbers in string. $ tells the expression to match until the end of the string. 

$ ("# someinput"). val () is jquery, but you can use regular javascript, as in: document.somepintput.value.match (re).

regular expressions are well-studied as they can solve many problems in a neat and concise way. Regular expressions

Answer 3

While nc3b is close, using parseInt will actually resolve cases that you might not want.

 parseInt("133t",10) 

results in: 133

Better to do

 if(isNaN(Number(str, 10)){ Error; } 

If you want to make sure that the entire string must be representative of the number.

Answer 4

I am using jquery and the AlphaNumeric plugin, see demo here

Answer 5

you may have javascript to check for an event that the isNAN function can use to view the entered values, or a number.

if (IsNaN ($ ('input [type = text]'). shaft ())

bye path isNaN means no number

Answer 6

It’s best to bet on the work of someone who has already done this for you, through a validation library and / or input masking library. Do not reinvent the wheel, a few good round ones, with rims suitable for almost any car, have already been invented for you.

Not linking specific here, because it's not exactly the point, a search in the "JavaScript form validation library" will find a lot.

Change I have not been looking for some time, I have to say that I like the look of this one . Both verification and masking, and not specific to the library (although there is a jQuery plugin available if you want). Again, snapping them is actually wrong, but she looked cool enough to shout out.

Answer 7

The code captures the input value, and then checks from start to finish, and {5} the number of digits (this is optional).

function validzip(){ txt1 = document.FormName.InputName.value; if (/^\d{5}$/ .test(txt1) == false){ /* Simpler/longer alternative to this is: if ((/[0-9]/g .test(txt1) == false) || (txt1.length != 5)){ */ alert('Not Valid'); return false; }

  return true; } 

code>

Answer 8

Use this with jQuery - http://digitalbush.com/projects/masked-input-plugin/

Allows you to enter numbers. It is also very easy to use and fully customizable, not to mention light weight.

Answer 9

On the client side, start with <input type="number"> (this will be considered type="text" in browsers that do not yet support HTML5. Then use javascript (as suggested by others) for browsers other than HTML5.

Remember to also check on the server side if people have javascript disabled.

Answer 10

Good answers have already been received from nc3b and skyfoot .

But nc3b's answer may fail with an input that has leading zeros, such as 007 and allowing exponential inputs.

And skyfoot's answer may not allow negative values , but may contain empty lines .

To avoid these pitfalls , I used the code snippet below.

  $(document).ready(function(){ $("input").change(function(){ var enteredValue = $(this).val(); var re = new RegExp("^[-+]?[0-9]+$"); if (enteredValue != "" && re.test(enteredValue)) { alert("You have entered valid integer"); } else { alert("This is not valid integer"); } //alert("The text has been changed."); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("input").change(function(){ var enteredValue = $(this).val(); var re = new RegExp("^[-+]?[0-9]+$"); if (enteredValue != "" && re.test(enteredValue)) { alert("You have entered valid integer"); } else { alert("This is not valid integer"); } //alert("The text has been changed."); }); }); </script> </head> <body> <input type="text"> <p>Write something in the input field, and then press enter or click outside the field.</p> </body> </html>