Search code examples
javascripthtmlformsvalidationinput

HTML5 input type=number value is empty in Webkit if has spaces or non-numeric characters?

This is strange behavior to me but on Webkit browsers (Chrome/Safari, not Firefox) if I include a space in a string of numbers in an <input type=number> then the value of that input is empty.

See this JSFiddle: http://jsfiddle.net/timrpeterson/CZZEX/5/

Here's the code:

<input id='withOutspace' type='number' value='123'>
<input id='with_space' type='number' value='123 123'>
<button>click</button>

$('button').click(function(){ 
    alert("withOut:"+$('#withOutspace').val()+" |||| with:"+$('#with_space').val());
});

If you go to this JSFiddle, you'll notice that the with_space input is empty. But if you put it in it a number that has a space or any non-numeric characters, the alert will say that input is empty.

Obviously, this is a disaster for form validation with credit card numbers, etc. so does anyone have a hack for this?

Solution

  • The hack is to use type="tel" instead of type="number".

    This solves the 2 main issues:

    1. It pulls up a number keypad on mobile devices
    2. It validates (and is not empty) with numbers or non-numbers as input.

    Please see this JSFiddle: http://jsfiddle.net/timrpeterson/CZZEX/6/