I just overheard this discussion on Twitter, kicked off by Dave.
Me (coding a form): <input id="zip" type="number">
Tiny Devil (appears on shoulder): Yaaas! I love the optimism, ship it!
Me: Wait, why are you here? Is this going to blow up on me? What do you know that I don't?— Dave SPOOPert (@davatron5000) October 9, 2018
It seems like zip codes are just numbers, right? So…
<input id="zip" name="zip" type="number">
The advantage there being able to take advantage of free validation from the browser, and triggering a more helpful number-based keyboard on mobile devices.
But Zach pointed out that type="number"
is problematic for zip codes because zip codes can have leading zeros (e.g. a Boston zip code might be 02119). Filament group also has a little lib for fixing this.
This is the perfect job for inputmode
, as Jeremy suggests:
<input id="zip" name="zip" type="text" inputmode="numeric" pattern="^(?(^00000(|-0000))|(\d{5}(|-\d{4})))$">
But the support is pretty bad at the time of this writing.
A couple of people mentioned trying to hijack type="tel"
for it, but that has its own downsides, like rejecting properly formatted 9-digit zip codes.
So, zip codes, while they look like numbers, are probably best treated as strings. Another option here is to leave it as a text
input, but force numbers with pattern
, as Pamela Fox documents:
<input id="zip" name="zip" type="text" pattern="[0-9]*">
As many have pointed out in the comments, it’s worth noting that numeric patterns for zip codes are best suited for the U.S. as many the codes for many other countries contain numbers and letters.
Don’t forget about the rest of the world that do not use Zip codes…Many use Postal Codes which can be a mix of numbers and letters.
I think the best solution, if possible, would be to change or remove the pattern attribute based on the country a user selected. That way people in countries such as the U.S. with number-only zip codes can have their validation to prevent errors, but people in other parts of the world aren’t limited.
Although zip codes are numbers the rest of the world uses Post Codes which can be a mix of numbers and letters. Fine if your ONLY USA based but very large problem if your international
The issue with the last option is that the pattern doesn’t allow for hyphens, which are needed if you want to support 9-digit zip codes.
Also, the regex pattern on Jeremy’s inputmode suggestion looks way wrong to me. I’m pretty sure it can be as simple as this:
(Match if input is exactly 5 digits, or optionally match if input is exactly 9 digits with a hyphen after the 5th digit)
Or, if you want to be extremely permissive:
(Same as before, but allow whitespace before and after, allow whitespace after the 5th digit, and allow but don’t require a hyphen after the 5th digit
It’s too bad the keyboard on mobile for
input="tel"
doesn’t include a hyphen, because it would be nice to be able to trigger a number pad for zip inputs. Doesinputmode="numeric"
allow for hyphens? I have no way of testing it to see what the keyboard looks like.I can’t believe the support for this is still sooo bad. I did a presentation on input behaviour like this some 4 years ago!
There is still no proper solution and we are using hacks like type=”tel” for one of the most common input types on the web :(
I guess never ship anywhere outside the US? Canada has letters in it’s zip codes, and other countries do not follow the same digit format.
US 9-digit zip codes have a hyphen between leading 5-digit group and trailing 4-digit group. Canadian zip codes have letters, are 6 digits, with a space between groups of three. Other countries vary also. You need to know what country, before you can impose a lot of structure or limitations.
Just to mention some places might even have letters in their zip code. For example the Åland Islands do have the AX before a 5 digit number, like AX22100 for the city of Mariehamn. Usually works out good without AX but could end up in Lund in Sweden that share the same number (22100).
Also remember that zip codes can use the optional 9 digit format with a dash (zip+4). International postal codes have different lengths and some include spaces and letters or are variable length (see UK and Canada). Some countries don’t have postal codes at all.
The astute programmer will note not every country uses all-numeric postal codes.
This proposal is rather USA specific. Most of the world uses postal codes with a combination of letters and numbers and does not call it zip, which is a USPO trademark. Any HTML input type should be type=”postal” and should accept a variety of patterns. Unless all of your customers are in the same country, you will need to use an open pattern. Or, specify the pattern after the country field is filled.
Just follow the robustness principle and accept all. With all your smart matching, you just rule out the entire rest of the planet…
zipps in netherlands are like number number number number letter letter
Plus the worls isn’t just the US.
Zipcodes vary. In the netherlands for example it is 4 numbers and 2 letters
Easy way(s) to identify a number:
A “number” must have a value.
If it makes no sense to calculate with it, it is no “number”.
The pattern “[0-9]*” works, on international level, only for some zip/postal-codes.
https://en.wikipedia.org/wiki/List_of_postal_codes
Postal codes in other countries don’t follow the formatting you’ve suggested.
For example, here in the UK it’s something along the lines of AB123CD
https://en.m.wikipedia.org/wiki/List_of_postal_codes
This is only true from a US point of view. Just look a the british postcode system: https://en.wikipedia.org/wiki/Postcodes_in_the_United_Kingdom which uses alphanumeric values
Depending on which countries you cover, your suggestions don’t work either, because some postal codes consist of alphanumeric characters as well: https://en.wikipedia.org/wiki/Postal_code#Alphanumeric_postal_codes
International addresses often have letters in their zip code equivalents (eg. postcode) so that’s another consideration if you’re planning to serve more than the US.
The pattern for ZIP codes depends on the country you are in. Allowing only numbers might lock out some of your international customers.
Zip codes are not numbers. Numbers are entities with which you can do calculations. So currencies and percentages are numbers and zip codes, house and telephone numbers are strings.
Don’t forget also that the rest of the world uses letters in a postal code… using type=number fails totally of course. Seen it done more than once and have been unable to supply legitimate address information because of it. The other related issue (usually js validation) is not allowing non-us phone number formats, so a correct phone number cannot be supplied. Both of these things are still amazingly common in 2018.
You’ll need letters if you’re supporting outside of the US. Both UK and Ireland postcodes are alphanumeric :)
I thought only northern Ireland (which is part ok UK anyway) used postcodes, and that ROI used none at all?
Just adding this in as a disclaimer: this will only work in the US (and possibly few other countries) but for example in the UK all zip codes contains letters. So even basic zip code validation gets trickier :(
Don’t limit zipcode field to digits only, please. Some countries have letters in zipcode. In the Netherlands zipcode consists from 4 digits and 2 letters, e. g. 3012 KJ. https://en.wikipedia.org/wiki/List_of_postal_codes
No please don’t do that (or change behavior regarding user’s country) : https://en.wikipedia.org/wiki/Postal_code#Alphanumeric_postal_codes
This is OK if your target market is in the USA. However in the UK a “zip” code is called a “postal” code and contains letters, numbers and spaces. In Southern Ireland they don’t have a zip/postal code system. If your form needs to be internationalised then it’s probably better not to attempt validation on it.
That will only work with a US only userbase I guess. I live in The Netherlands and zipcodes here are formatted like
0000AA
(four numbers, 2 letter)Please mind that we don’t all have numerical zip-codes.
In the Netherlands, we use this format: “1234 AB”.
– 4 numbers, not starting with a 0
– optional whitespace
– 2 digits, never containing SA/SD/SS
The regExp would be;
/^[1-9][0-9]{3} ?(?!sa|sd|ss)[a-z]{2}$/i
This might not be an issue for a local webshop but if you plan on selling abroad it might not be the best move the put many restrictions on the inputs ;)
International zipcodes can/will have letters in them
in many countries (like Britain f.e.) there also are letters in the post codes! so, also with the pattern it would be too restrictive if you design for international customers
Canada and many other country’s zip codes have letters in them, so number would really never work for zip code
As a UK resident who has had to deal with American sites (including the Dell support site that requires you to put in a zip code) the “Zip codes are numbers” thing is a BAD mistake to make.
UK postal codes (which are similar to those in a few other country) have letters in EG AB12 3CD and there’s a few other fun ones out there as well.
Don’t forget to consider outside the US too! British ‘zip codes’ (post codes to us!) contain both numbers and letters. I’d get super agitated if a form didn’t allow letters. Maybe some clever pattern recognition could be used to determine which country the code is for and flag a message or warning.
But maybe that’s over the top and a label would do the job… something to consider though!
And then we have letters in Canadian zip code (ex:H2R3N9)
In some European countries zipcodes can contain letters and spaces like: 1234 AB
I stick with input text, when I do validate it is based on country and even then it can be tricky
Emm… It’s important to note that, yes, the USA has number-only zip codes. Other countries… not so much.
Consider UK, where the zip/postal code may be “WC2N 5DU”.
Now do it for the UK :P
This is hilarious, people are livid. If there’s one thing that programmers hate it’s assumptions about the circumstances :)
In Poland (and few other small/middle small countries) zip codes contain dashes (e.g. 03-123 Warsaw city, the capital of Poland).