0151 355 4555

Ajax Address Validation

This sample demonstrates using our address validation service to add a "Find" button next to a postcode field that shows the user a list of addresses on that postcode. When they select an address, the details are used to fill out the other address fields on the form.

To give the smoothest user experience, this sample uses Ajax and doesn't involve any popups.

For the sample to work, you must have first added the domain name of your website to your allowed list for your Ajax key.

The sample assumes you have a form on your website such as that shown below:

By adding the code below a "Find" button is immediately added with a full postcode finder window.

<script type="text/javascript" src="https://webservices.data-8.co.uk/javascript/address_min.js"></script>

<script type="text/javascript">

new data8.postcodeLookupButton(
		{ element: 'company', field: 'organisation' },
		{ element: 'address1', field: 'line1' },
		{ element: 'address2', field: 'line2' },
		{ element: 'address3', field: 'line3' },
		{ element: 'city', field: 'town' },
		{ element: 'county', field: 'county' },
		{ element: 'postcode', field: 'postcode' }
		// Change this to your own Ajax key
		ajaxKey: 'your-ajax-key',

		// Change this to your postcode lookup license type
		license: 'WebClickFull',
		 // Optional: Say that Boostrap is used on site and to try and match the formating
		bootstrapUsed: 'true'
		// Optional (requires bootstrapUsed): Specifies the "Find" button's bootstrap class
		bootstrapButton: 'btn-warning'



There are two main parts to the configuration of this script - the list of elements in your form that should contain the various fields from the address, and the options that give the script details of the Data8 account to use when performing a lookup.

The form elements that should contain the various parts of the address are listed in the first part of the script as { element: 'id', field: 'name' } pairs. Add one of these for each element in your form that contains part of the address with the element set to the ID or name of the HTML element and the field set to one of the following values:

  • organisation - the field should contain the company name
  • line1 - line6 - the field should contain the corresponding line of the address
  • town - the field should contain the town name
  • county - the field should contain the county name
  • postcode - the field should contain the postcode
  • coutry - the field should contain the country

You must specify an element for at least the line1 and postcode fields, and you can also include as many or as few of the other fields as you like.

There are a number of options that control the details of how this script works. All these options are passed in as part of the second parameter to the data8.postcodeLookupButton constructor.

  • ajaxKey - your Data8 Ajax key
  • license - the type of license you have for the Data8 address validation service; check with your account manager if you are unsure
  • findLabel - the text to use for the "Find" button next to the postcode field
  • okLabel - the text to use for the "OK" button at the bottom of the address list
  • cancelLabel - the text to use for the "Cancel" button at the bottom of the address list
  • expectedCountry - the value that a country drop-down list must have before the "Find" button is shown
  • bootstrapUsed - set to 'true' if you use Bootstrap. This will attempt to match your sites appearance and put the "Find" button on the end of the Postcode field
  • bootstrapButton - (Optional & Requiers bootstrapUsed to be true) This allows you to specify the "Find" button's bootstrap class e.g. "btn-warning'


For this script to work you must also include jQuery.

Getting more control

You can override many of the details of how the address validation script works to take fine control. For full details, see the more detailed samples below.