1

Is there any way of getting the inserted string(of any sort) from:

<input type="number" id='zipCode' name='zipcode' />

I'm trying to get value in console as:

console.log(document.getElementbyId('zipCode').value);

is giving just a blank output when any invalid string(string containing any alphabet or other special characters) is inserted which is also the same when actually left the field blank. But I want to retrieve the actual inserted value so that I can differentiate and validate the blank field with error message "Zipcode Field Empty!" and on invalid character string with error message "Invalid Zipcode!". Is there any way to retrieve any sort of inserted string from input type='number' field?

Ankur Shah
  • 801
  • 1
  • 12
  • 26
  • 1
    You can attach key event on the field and check it manually.. or make the input type=text and do the validation by yourself.. – Goran.it Oct 01 '14 at 10:34
  • 1
    Take a look at this similar question and answer http://stackoverflow.com/a/18853513/3870761 – sergioFC Oct 01 '14 at 10:35
  • Why are you using an input type number if you want to get values that aren't numbers? Those types of input are supposed to remove the need for script, not make the task more arduous. – RobG Oct 01 '14 at 10:37
  • @RobG : just to get numeric keypad on mobiles...and I want them for number format only.. – Ankur Shah Oct 01 '14 at 11:19

2 Answers2

4

HTML input fields used for Zip Codes should be type=text and use the pattern attribute to provide hints to the browser

A numeric ZIP code is -- in a small way -- misleading.

Numbers should mean something numeric. ZIP codes don't add or subtract or participate in any numeric operations. 12309 - 12345 does not compute the distance from downtown Schenectady to my neighborhood.

ZIP codes aren't numbers -- they just happen to be coded with a restricted alphabet -- I suggest avoiding a numeric field. Same goes for credit card or social number

You can do <input type="text" pattern="\d*">. This will cause the numeric keyboard to appear on iOS (and Android?). Maybe it was pattern="[0-9]*"

"The semantically correct markup for a text field that can still contain whitespace and other special characters is <input type="text" inputmode="numeric"/> however as far as I am aware while inputmode is recommended by WhatWG it is not yet supported by any browsers. Its intent is to present the user with a numeric keypad on a device that has it but still behave as a text input." - davidelrizzo

Community
  • 1
  • 1
Endless
  • 34,080
  • 13
  • 108
  • 131
  • you got me!....I want this functionality for getting numeric keypad on mobiles, my actual problem is related to sencha-touch xtype: 'numberfield', where I had to use it(see [here](http://stackoverflow.com/questions/26134892/how-to-get-actual-inserted-value-from-xtype-numberfield-in-sencha-touch))!....then I checked this for type='number' in html and getting the same thing so I thought its somewhere related to that!.... – Ankur Shah Oct 01 '14 at 11:07
  • 2
    To say that ZIP codes aren't numbers because subtracting one ZIP from another doesn't give you the distance between the two ZIPs is using a rather narrow view of the word "number". Check your preferred reference ([Merriam Webster](http://www.merriam-webster.com/dictionary/number)? [Wikipedia](http://en.wikipedia.org/wiki/Number)?) and you will find that numbers include "labels." And while I can't read the minds of the spec writers or the browser vendors, I suspect the definition they had in mind for "number" here is the "restricted alphabet 0-9." Why would they care what the digits mean? – Josh Oct 01 '14 at 14:26
  • The real question here is what restricted alphabet do you want to permit users to enter, and what's the best UI you can offer? If you want to permit not just ZIP, but [ZIP+4](http://en.wikipedia.org/wiki/ZIP_code#ZIP.2B4) (which includes a - character), then type="number" won't do it. Additionally, you need to decide in your context if the "spinner arrows" many user agents present make sense in your application. Hence, a pattern restriction may be the best alternative, although it's not going to restrict the keyboard to numeric on Android (at least, not with any version I've tested). – Josh Oct 01 '14 at 14:32
  • I'm not stupid @Josh i know what a number is... my point is that `type=number` should be used for something that can be mathematical. there is a different between number and digest, here are at least some that can back me up [here](http://css-tricks.com/forums/topic/html5-input-types-for-credit-card-numbers/) and [here](http://stackoverflow.com/a/24236106/1008999) – Endless Oct 21 '14 at 18:57
  • All your points are valid, but you missed an important one which is known to many Excel users: zip codes can also start with a leading zero. All the browsers I have seen will automatically strip leading zeros from the input. – Dave Jan 12 '17 at 22:05
1

From what I remember reading (example here - HTML5 input type=number value is empty in Webkit if has spaces or non-numeric characters?) there is no way of doing this with the input type set to number.

Community
  • 1
  • 1
Raymond Camden
  • 10,661
  • 3
  • 34
  • 68
  • but I still had to make it resolve as I want the number keypad to appear in mobiles and proper validation must be checked... – Ankur Shah Oct 01 '14 at 11:24