
Question:
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 <strong>invalid string(string containing any alphabet or other special characters)</strong> 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 <strong>"Zipcode Field Empty!"</strong> and on invalid character string with error message <strong>"Invalid Zipcode!"</strong>. <strong><em>Is there any way to retrieve any sort of inserted string from input type='number' field?</em></strong>
Answer1: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 <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/association-of-controls-and-forms.html#attr-fe-inputmode" rel="nofollow">WhatWG</a> 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." - <a href="https://stackoverflow.com/users/1676834/davidelrizzo" rel="nofollow">davidelrizzo</a>
From what I remember reading (example here - <a href="https://stackoverflow.com/questions/18677323/html5-input-type-number-value-is-empty-in-webkit-if-has-spaces-or-non-numeric-ch" rel="nofollow">HTML5 input type=number value is empty in Webkit if has spaces or non-numeric characters?</a>) there is no way of doing this with the input type set to number.