Differentiate between NaN input and empty input with an Input of type="number"

Question

I want to use a form input with type="number" and only allow numbers to be entered.

<input type="number" class="form-control fc-input"/>

I don't have a submit button, instead the value is checked after the input loses focus. However when you use type="number" and a non-number is entered, both the valueAsNumber and the value attributes of the input will be useless (NaN respectively ""). The problem with this is that I want to differentiate between the user entering an empty string (""), and the user entering a non-number value (e.g. 123abc). When the input is empty I want to execute function a, and if it's just a non-number I want to execute function b (otherwise do c).

Is there a good way to differentiate between NaN input and empty ("") input like this?

Perhaps I'm misunderstanding your question, but why not if(value === NaN) and if(value === "")? — Jordan Running
– Jordan Running, Commented Nov 3, 2014 at 19:58
Funny thing about NaN is that it is not equal to itself... NaN === NaN // false — Salman Arshad
– Salman Arshad, Commented Nov 3, 2014 at 20:00
@Jordan: The if(value === NaN) will always be false, no matter what value is. Nothing is === to NaN, including NaN. — user1106925
– user1106925, Commented Nov 3, 2014 at 20:04
@Jordan The problem is that whenever I enter both an empty string (remove all input) and when I enter a NaN value ("abc") the value will always be "", and at the same the the valueAsNumber will always be NaN, therefore I can not differentiate between the two cases. — usealbarazer
– usealbarazer, Commented Nov 3, 2014 at 20:09

Jordan Running · Accepted Answer · 2014-11-03 20:25:31Z

10

The problem is input type of number does a lot of stuff under the covers and the specification for it does not expose the actual invalid value to you. So an empty input and an invalid string look the same. So you need to do some investigation work using validity

var result = document.getElementById("result");

document.getElementById("num").addEventListener("keyup", function() {
  var isValid = this.validity.valid;
  var len = this.value.length;

  if (isValid && !len) {
      result.innerHTML = "No value";
  } else if (!isValid) {
      result.innerHTML = "Invalid number";
  } else {
      result.innerHTML = "Valid number: " + this.valueAsNumber;
  }

});

<input type="number" id="num" />
<span id="result"></span>

Problem with the code above is if you make it required, the empty check will fail. If it is required the if check would need to be

if (!isValid && this.validity.valueMissing) {

edited Nov 3, 2014 at 20:25

Jordan Running

107k18 gold badges193 silver badges189 bronze badges

answered Nov 3, 2014 at 20:15

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

usealbarazer Over a year ago

I was completely unaware of the validity attribute. It does exactly what I need, thank you!

brunoais Over a year ago

If you are using the validity, then you should use the "input" event instead as all browsers that support validity also support the input event

Collectives™ on Stack Overflow

Differentiate between NaN input and empty input with an Input of type="number"

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related