Platforms

Street Address Form Validation with ReactJS and HERE Geocoder Autocomplete

By Jayson DeLancey | 28 October 2018

If you want customers to buy from you, requiring a shipping or billing address may become part of your ReactJS application. Nearly every database course looks at postal addresses as a good baseline tutorial for how to organize your data model in normal form, but what about on the client-side?

To keep garbage out of your records you may want to take some time to address this with address validation. If you also want to improve the user experience, the HERE Geocoder Autocomplete API may help. This REST service lets you identify an address in fewer keystrokes which can help avoid spelling mistakes by providing suggestions with each character typed. There are also some powerful features like spatial and region filters to improve relevance as well.

Project

For this project, we want to create a simple address form as shown by this mockup.

As you start typing “2168 Sha” the rest of the address should be filled in automatically. We can then check the address with the HERE Geocoder API to be sure we can identify a latitude and longitude value.

Getting Started

Generating 29,542 files for what amounts to a single page form may seem like overkill, but I still recommend starting with create-react-app. The development tools like a local server with live-reloading in a browser are helpful for quick iterations. Let’s get started by running the following:

create-react-app app
cd app
npm install bootstrap axios
npm start

As you can see I’ll also be using Bootstrap as the CSS framework and axios as an HTTP client.

Thinking in React

Following the concepts from the ReactJS tutorial Thinking in React we will follow a few basic steps.

Break the UI into a component hierarchy

Build a static version

Identify the minimal representation of UI state

Identify where the state should live

Add inverse data flow

Break the UI into a component hierarchy

Using our mockup from before, it looks like we can break the page up into a number of components.

Build a static version

Starting from the bottom, the AddressItem is a single row item consisting of a label and form element. I’m using ES6 classes and exporting the class for use by other components.

As you can see we just hard-coded some static values in as properties to see how our form will look before we need to deal with any interactive behaviors. Up next, we need to replace some of those properties with state.

Tracking State

Up to this point we’ve only used immutable properties. Now we want to go back and start tracking state. The minimal information we want to track:

search query entered by the user which changes over time

postal address can be computed, but can also change over time by user input

The AddressForm is a common ancestor in the hierarchy for these two related components that we want to keep in sync. As the user starts typing text in the AddressSuggest we will query the HERE Geocoder Autocomplete API and update AddressInput.

Looking at the HERE Autocompletion JavaScript Demo we see the required parameters of query, app_id, and app_code. Unlike that demo, we will use axios as the HTTP client for making requests. The constant variables APP_ID_HERE and APP_CODE_HERE also need to be defined to be referenced as seen in the code below.

The response from the Geocoder Autocomplete includes an array of suggestions. Two valuable pieces of information there include the locationId if we wanted to do a full geocoder lookup by id to get the latitude and longitude. Included is also an address block which details the city, country, street, state, and postalCode for display in our form.

Inverse Data Flow

You may have noticed that for our AddressSuggest component we added a onChange={this.onQuery}. This pushes this method down to lower-level components. Those lower level components need to respond to user input which should be easy now that we’ve passed a reference to this handler as a property as seen in the AddressSuggest component.

It is worth noting that each character typed by the user triggers this event. Since each event fires off a request to the Geocoder Autocomplete service we can quickly rack up many transactions. A final solution may make more efficient use of how these events are handled or display a lookahead of more than one suggestion at a time by changing maxresults=10.

Validation

Up to this point we’ve helped the user by using their input as suggestions for guessing the correct address with less typing and errors. Once the address is input though, now we want to check it. We need to implement the behavior of our check and clear buttons using the HERE Geocoder.

First, let’s modify our rendered elements to include a result and onClick event callbacks.

The clear handler is pretty straightforward, just calling setState() for returning everything to the initial state as it was when constructor originally runs. The check handler is much more involved. Let’s look at it in a few pieces. This first section is initializing the parameters for the Geocoder service. If we used the Geocoder Autocomplete to find a suitable address, we should already have a LocationId that we can use. If we don’t have that or the user entered text into the various fields – then we’ll construct a search string with whatever details are provided.

With the parameters in place, we again use axios to fetch a response from the geocoder REST API. If we get back a promised response with a matching location we can set the state to the appropriate success or error conditions.

Summary

This demonstration looked into how to think about creating components with React so that we could build a smart address form with theHERE Geocoder Autocomplete API. We also did some additional validation using theHERE Geocoder APIto retrieve a latitude and longitude to help us test our match quality. Street address validation for deliverability can be a complex subject but hope this gets you started.

There are many other ways to do client-side address validation which haven’t been covered here but hope that seeing how to use a Geocoder as a component can be valuable for better user experience. If you use other libraries likeFormik,react-final-formorinformedand have other ideas about how to do address validation with React let me know in the comments.