input type=“number” and IE10+

Question

I'm trying to do Javascript client-side validation of a number field using an HTML5 <input type="number"> element. There is also server-side validation, so let's not start a rant about that... ;)

I wish to provide three status levels of validation: Green for a valid number within the defined range, Yellow for an out-of-range number or an empty field, and Red for non-numeric input.

My problem is that IE11 (and, I believe, IE10) seem to return a blank .value property for non-numeric input. That is, if I type abc into the box, .value is "". That prevents me distinguishing Yellow (blank) from Red (garbage).

I'm aware of the existence of the new .valueAsNumber property, but that does not completely help me as I cannot distinguish between empty on other browsers and non-numeric on IE10/11 (.value is empty, .valueAsNumber is NaN).

Has anyone solved this problem? I don't want to resort to tracking keypresses, and I want to support older browsers (back to IE8) that revert to type="text" and do not have .valueAsNumber. Thanks in advance...

Edit: just to clarify (hopefully), my issue is that the output of .value and .valueAsNumber in IE10/11 does not allow me to distinguish between no input and non-numeric input. I would like to be able to distinguish these two cases without browser-sniffing and falling back to type="text".

Answer 1

Go ahead and use valueAsNumber in browsers that support it.

var
  coerced,
  value,
  input = yourInput;

if(typeof input.valueAsNumber !== "undefined") {
   value = (isNaN(input.valueAsNumber)) ? "dummystring" : input.valueAsNumber;
} else {
   value = input.value; 
}

if(typeof input.value === "string") {
 //non-numeric
} else {
 coerced = +input.value;
 //do validation on coerced - it is now a number
}

Browsers that support valueAsNumber, they also support input[type=number], so this will solve your problem.

Answer 2

Could you not just assign a sensible default value (zero?) to your input class? Then you wouldn't need to make the distinction in your code in the first place?

Pragmatism always trumps ingenuity in my book ;)