jQuery val refuses to return non numeric input from a number field (Under Chrome)

Question

Just stumbled across something weird in jQuery, while writing some validation code- I have an html5 "number" field;

<input type="number" class="required numeric" />

My script will then look at every field on the page checking out the classes and validating as needed. I noticed weirdly that if i enter an 'X' into one of my numeric fields i get a "Please enter a value into this field" error instead of a "this should be a number" error. After some head scratching and a lot of debugging I knocked up a jsFiddle to demo my theory- it appears if you enter a character into a number field, then try to do a .val() from jquery it will return nothing- as though the field was empty (I came across this in Chrome- not sure if it works like this across all the browsers);

http://jsfiddle.net/shawson/SE46L/3/

Here's the fiddle- enter some numbers, then a few letters to see the crazyness. Anyone know if this is by design, and if so... why?

Answer 1

This is not a jQuery issue. You will get the same result if you use the native element.value (e.g. with getElementByID('something').value). It's quirk of how Chrome deals with input type=number and you can choose to work around it by using type=text and the pattern property.

See this older question for more background.