7

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?

Shawson
  • 1,858
  • 2
  • 24
  • 38
  • 1
    Works in Firefox, must be Chrome specific, and I'm guessing Safari too as it renders the "number" attribute the same. – Chris Dixon May 07 '13 at 13:58
  • How annoying- yes just tried IE10 and that works fine with it! – Shawson May 07 '13 at 14:00
  • This is not a jQuery issue - the element itself is returning an empty string for non-numeric input. – Alnitak May 07 '13 at 14:03
  • IE10 and FF20 don't support the `input type=number` yet so they fall back to an `input type=text`. Opera supports it and displays an emtpy value. – ZippyV May 07 '13 at 14:11
  • @apsillers actually, the spec says that type="number" should return a float (numeric input or otherwise) – Brad Kent Apr 18 '16 at 02:42
  • @apsillers https://www.w3.org/TR/html5/forms.html#number-state-(type=number) : "If the value of the element is not a valid floating-point number, then set it to the empty string instead" – Brad Kent Apr 18 '16 at 20:09
  • @BradKent *That's* the spec I was looking for. Thank you; I am bookmarking 4.10.5 for future reference. – apsillers Apr 19 '16 at 00:53
  • See also: http://stackoverflow.com/questions/18852244/how-to-get-the-raw-value-an-input-type-number-field – Brad Kent Apr 19 '16 at 03:20

2 Answers2

9

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.

Community
  • 1
  • 1
explunit
  • 18,967
  • 6
  • 69
  • 94
  • 4
    This has the unfortunate downsie that A) the up and down arrows to easily input small integers disappears and B) on mobile displays (tablet, smartphone) the keyboard will not automatically show numbers but the full abc keyboard instead. – user1884155 Mar 26 '14 at 16:55
  • the "quirk" is the spec: https://www.w3.org/TR/html5/forms.html#number-state-(type=number) : "If the value of the element is not a valid floating-point number, then set it to the empty string instead". If you get an empty string back and are wanting the invalid value: temporarily change the input type to "text", retrieve the value again, convert it back to type="number" – Brad Kent Apr 18 '16 at 20:22
1

Came across the same issue in Chrome, won't give a value on type=number when they are non numeric. The work around I put in was to simply set the value to the value of itself. That way it won't let you enter non numeric values in the first place. It's a hack but it works.

eg: 

$('body').find('input[type="number"]').each(function(k,v) {

    $(this).on('keyup blur', function() {
        $(this).val($(this).val());
    });

});
Prashant Kumar
  • 20,069
  • 14
  • 47
  • 63
user3594630
  • 11
  • 1
  • 1
    Actually gave up on number types for the mean time as firefox has issues loosing focus on the input box. – user3594630 May 18 '14 at 23:51
  • With this solution, the user cannot continuously type at the start of the number as it constantly moves the caret to the end. – Pang May 28 '14 at 06:34