Getting the value of a HTML5 number input
Asked Answered
B

1

18

I'm using one of the new HTML5 input types, number:

<input type="number" />

In Opera, which is the only desktop browser I know of which currently recognises it, it renders it as such:

enter image description here

The problem I'm facing is one of validation. If a user types something invalid into the field, eg: "abc", the value returned by myInput.value is an empty string. This makes it impossible to tell whether the user left the field blank, or if they entered some incorrect data. Is there any way to get the real value of the field?

Bow answered 22/6, 2010 at 6:35 Comment(0)
S
13

The HTML5 draft defines:

The value sanitization algorithm is as follows: If the value of the element is not a valid floating point number, then set it to the empty string instead.

Reference1

I suppose you'd have use a default value of "0" to make sure the field was left untouched or if something invalid was entered, since there seems to be no obvious way to differentiate the two.

After reading up validation specs and some testing (in Opera 10.54) I concluded that:

<input id="email" type="email" value="blah">
document.getElementById("email").validity.typeMismatch // True

Doesn't work on <input type="number">. Not sure if it's supposed to, or if it's a work in progress. The property does however exist, though it always returns False.

Read more2

You can also set a custom validation method Reference3

Scleroprotein answered 22/6, 2010 at 11:22 Comment(2)
Oh balls. Leaving the field blank needs to be a valid state for my purposes (and it's different to entering 0...) Thanks anyway.Bow
That spec does say "If applying the rules for parsing floating point number values to input results in an error, then return an error; otherwise, return the resulting number." Do you think there'd be any way to catch that error?Bow

© 2022 - 2024 — McMap. All rights reserved.