How to check if user input is a number?

Question

I would like to check if user input is a number; the 'input' is from an html input tag. I have provided code below. I don't understand why my code is not working, any help would be greatly appreciated.

document.getElementById('input').addEventListener("input",
function(){
  var userInput = document.getElementById('input').value;
  if(!isNaN(userInput)){
    alert("Is a number");
  }
  else{
    alert("Is not a number");
  }

},true);

User Input : <input id="input">

Do console.log(document.getElementById('input').value) to see what you get — Akber Iqbal, Dec 25 '18 at 05:59
Possible duplicate of [Check if input is number or letter javascript](https://stackoverflow.com/questions/18042133/check-if-input-is-number-or-letter-javascript) — Prabhakaran Ramaswamy, Dec 25 '18 at 06:07
@Prabhakaran the answer to this question is different from the post you have provided. I think it will be beneficial to leave this post. With that being said, I am still unfamiliar with StackOverflow "etiquette"; if I should delete this post, let me know. — Ayma, Dec 25 '18 at 06:18

score 4 · Accepted Answer · answered Dec 25 '18 at 06:02

4

you can use typeof

var userInput = document.getElementById('input').value;
if(typeof userInput == 'number')){
  console.log("Is a number");
}else{
  console.log("Is not a number");
}

answered Dec 25 '18 at 06:02

mstfyldz

482
1
6
12

Thanks for the answer. This was the simplest way of achieving the result without changing too much of the code. – Ayma Dec 25 '18 at 06:15
Just a minor gotcha here. `typeof NaN === 'number'`. Read more https://stackoverflow.com/questions/2801601/why-does-typeof-nan-return-number – Ahmad Maleki Dec 25 '18 at 06:28

score 2 · Answer 2 · answered Dec 25 '18 at 06:04

Try it like this.

function validate(){
  var userInput = document.getElementById('input').value;
  if(!isNaN(userInput)){
    console.log("Is a number");
  }else{
    console.log("Is not a number");
  }
}

<html>
<body>
<input type="text" id="input" onchange="validate()">
</body>
</html>

Waleed Iqbal · Answer 3 · 2018-12-25T06:24:56.077

2

Many good answers already here, but another way I can think is to compare the string with 0 like following

"string" >= 0 || "string" <= 0

This return true only if its a number. But the catch is that it will also return true if its an empty string. So you can use if you know for sure that user enters at least one character/number or you are already handling the empty input case.

edited Dec 25 '18 at 06:24

answered Dec 25 '18 at 06:08

Waleed Iqbal

1,308
19
35

1

I might be missing something here but `'1' >= 0 && '1' <= 0` and `1 >= 0 && 1 <= 0` are both false. Do you mean `"string" >= 0 || "string" <= 0`? – Ahmad Maleki Dec 25 '18 at 06:22

score 1 · Answer 4 · answered Dec 25 '18 at 06:04

1

<input type="text" onkeypress='return event.charCode >= 48 && event.charCode <= 57'>

accept only numbers.

answered Dec 25 '18 at 06:04

suleymanduzgun

365
8
17

1

User input doesn't have to be via keyboard. What if he `copy & paste` something? – Ahmad Maleki Dec 25 '18 at 06:12
1

You are right Ahmad Maleki... isNaN must be answer. – suleymanduzgun Dec 25 '18 at 06:18
isNan or typeOf must be answer. – suleymanduzgun Dec 25 '18 at 06:31

score 1 · Answer 5 · answered Dec 25 '18 at 06:05

1

You can use typeof to validate.

> a = 10
10
> typeof a
'number'

> if(typeof a === 'number') { console.log("Number") } else { console.log("Not a Number") }
Number
undefined
>

answered Dec 25 '18 at 06:05

Raja G

5,973
14
49
82

How to check if user input is a number?

5 Answers5