0

I am tasked with designing an address form that will function with U.S. as well as international addresses. There are multiple instances where our application may ask for an address. Also, the person filling out the address may not be the address owner, so the whole IP lookup method doesn't seem applicable here.

My issue at hand, is that I want to be able to conditionally show/hide or validate the "State/Province/Region" field depending on if the selected country contains administrative divisions or not. An ideal experience would be a completely dynamic address fieldset that is dependent on the selected country, however, our primary user base consists of people with U.S. addresses and the level of effort required to build the totally dynamic fieldset doesn't seem to make sense in this scenario.

Has anyone else had experience with country dependent validation for address forms? If so, is there some kind of magical list of countries WITHOUT administrative divisions? I have not been able to find one! Thank you!

  • I would explore getting an off-the-shelf solution rather than implementing it myself. This gets really complicated, and I'm sure good solutions exist. – user31143 Jun 16 '16 at 13:40
  • Thank you Dan! I have also been looking into some off-the-shelf solutions. We're checking into MelissaData as a tool to use for autocompleting addresses. – Cameron Miller Jun 16 '16 at 14:22
  • @CameronMiller You should look at this plugin for autocomplete community.algolia.com/places/?ref=producthunt , pretty incredible – Mervin Johnsingh Jun 16 '16 at 21:34
  • @MervinJohnsingh, checking into it now... Thank you! – Cameron Miller Jun 17 '16 at 15:58
2

My suggestion would be to design two types of forms either of which would be shown depending on which country is selected

  1. United states - Show an United states address form (I suggested the United states as one option since you said most of your users are from there)
  2. Any other country - Show an international form

To determine the form to be shown , the simplest approach would be have the country field be the first field in the form (as shown below) and dynamically show the other fields on setting the country field value.

enter image description here

The United states form would have the following fields

  1. Name
  2. Address 1
  3. Address 2
  4. City
  5. State
  6. Zip

With regards to the international form, I recommend reading this article in UX matters which has this to say on the best practices for International addresses

The generic international address format offers an alternative to maintaining multiple address block variations to support country-specific solutions. The generic format lets you manage variations in name and street address by providing a single input field for each element of an address. To accommodate variations in the address block layout and city line, you can use a set of generic input fields.

enter image description here

Instead of displaying different drop-down lists according to the selected country, a single input field with an all-inclusive label, State / Province / Region, lets users provide their state, province, or region. Likewise, the broad label ZIP/Postal Code—which could also have included Postcode—accounts for postal code variations in an input field that allows alphanumeric characters, spaces, and various lengths. By distributing address elements across multiple lines, you can manage the ordering of postal codes, regions, and towns without implying any specific address structure.

Note: In the example given above for the international field, you would need to also set the country field to be the first form field to enable the dynamic change as needed.

  • Thank you Mervin! That sounds like a pretty logical way to go about this. I am going to see if a solution like this will fly with our CTO. – Cameron Miller Jun 16 '16 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.