Input type='number' new validation removes leading zeros and formats number in Safari for iPhone iOS5 and latest Safari for Mac

validation safari ios5 textfield numeric-keypad
tif picture tif · Oct 20, 2011 · Viewed 7.8k times · Source

The latest Safari for MacOS and the one that comes in iOS5 has some extra validation that causes problems if the text field is not a phone number.

Case: Input text field with type="numeric" attribute.

Problems: 1) Number gets formatted as a phone number. E.g. if I type '012345678' it gets formatted as '012 345 678'

2) Leading zeros are being removed. E.g. '01234567' gets formatted as '1234567'

I could just remove the type="numeric" attribute on my text field and probably the problem will disappear, but I would really like to use the numeric keypad for this text field instead of the normal keyboard on the iPhone.

Any ideas how to fix this?

Many thanks

Answer

tif picture tif · Oct 24, 2011

I change type="number" to type="tel" and works fine. I did some quick testing and have not found any validation or auto-formatting of the text either.

Related questions

Safari JS cannot parse YYYY-MM-DD date format?

In a project I am working on, I need to validate a date entered into an <input type="date"> With Safari 4/5 (on Mac OSX) the Javascript fails to parse dates of the format YYYY-MM-DD, returning NaN instead of …

Read More
HTML5 Validation with Opera and Safari

I am having a problem with the HTML5 validation on Opera and Safari. In Opera, the message bubble it's not displaying any text, and in safari the validation does not occur when i press the submit button. In IE, Mozilla …

Read More
How to validate an email address in JavaScript

Is there a regular expression to validate an email address in JavaScript?

Read More