Implementing Free Email Validation with UK Addressing

If you use our UK addressing and auto-fill solution, you might be aware that when you use this product, you can also use our email validation solution for free.

This quick guide will demonstrate how to implement email validation in your pages. Remember this is only a guide - when it comes to web design, anything is possible!

Step 1: Licence Key

There are several things you will need in order to use this system. The first is a key. You can create one for yourself by navigating to the ‘Setup My Account’ wizard and auto-generating the web service key (you must first, of course, have or set up a Postcode Anywhere account at postcodeanywhere.com). It should look something like this: AA11-AA11-AA11-AA11.

Step 2: The Form

The second thing you will need is a form to put the look-up into; for this example were going to use a form like this:

<table>
     <tr>
          <td>Email</td>
          <td><input type="text" id="email" size="40"></td>
     <tr>
          <td>Postcode</td>
          <td><input type="text" id="postcode" size="40"></td>
          <td><input type="button" value="Find"></td>
          <td><select id="return" style="display:none;"></select></td>
     </tr>
     <tr>
          <td>Company name</td>
          <td><input type="text" name="company" id="company" size="40"></td>
     </tr>
     <tr>
          <td>Line 1</td>
          <td><input type="text" name="line1" id="line1" size="40"></td>
     </tr>
     <tr>
          <td>Line 2</td>
          <td><input type="text" name="line2" id="line2" size="40"></td>
     </tr>
     <tr>
          <td>Line 3</td>
          <td><input type="text" name="line3" id="line3" size="40"></td>
     </tr>
     <tr>
          <td>Town</td>
          <td><input type="text" name="town" id="town" size="40"></td>
     </tr>
     <tr>
          <td>County</td>
          <td><input type="text" name="county" id="county" size="40"></td>
     </tr>
     <tr>
          <td>
               <input type="text" style="display:none;" id="VF" />
               <input type="text" style="display:none;" id="FDR" />
               <input type="text" style="display:none;" id="FS" />
          </td>
     </tr>
</table>

You’ll probably notice that we have several interesting fields in this table.

The select box, for example, is both hidden - and empty. This is because we don’t want this to appear on our form until we’ve filled it with addresses.

There are also three hidden fields at the end of the form. These will contain the results of the check on the email address entered, so there’s no need to show them to the user. Their IDs represent the different checks made against the email address:

Step 3: Coding

OK! So we have the key and the form, and can make our request. You will now need to add two functions to your HTML page.

The first is the “Find By Postcode” function:

function PostcodeAnywhere_Interactive_FindByPostcode_v1_00Begin(Key, Postcode, UserName)
   {
      var scriptTag = document.getElementById("PCA8f2503b9d9a643e4b61611b67f168103");
      var headTag = document.getElementsByTagName("head").item(0);
      var strUrl = "";

      //Build the url
      strUrl = "http://services.postcodeanywhere.co.uk/PostcodeAnywhere/Interactive/FindByPostcode/v1.00/json.ws?";
      strUrl += "&Key=" + escape(Key);
      strUrl += "&Postcode=" + escape(Postcode);
      strUrl += "&UserName=" + escape(UserName);
      strUrl += "&CallbackFunction=PostcodeAnywhere_Interactive_FindByPostcode_v1_00End";

      //Make the request
      if (scriptTag) 
         {
            try
              {
                  headTag.removeChild(scriptTag);
              }
            catch (e)
              {
                  //Ignore
              }
         }
      scriptTag = document.createElement("script");
      scriptTag.src = strUrl
      scriptTag.type = "text/javascript";
      scriptTag.id = "PCA8f2503b9d9a643e4b61611b67f168103";
      headTag.appendChild(scriptTag);
   }

function PostcodeAnywhere_Interactive_FindByPostcode_v1_00End(response)
   {
      //Test for an error
      if (response.length==1 && typeof(response[0].Error) != 'undefined')
         {
            //Show the error message
            alert(response[0].Description);
         }
      else
         {
            //Check if there were any items found
            if (response.length==0)
               {
                  alert("Sorry, no matching items found");
               }
            else
               {
                  //PUT YOUR CODE HERE
                  //FYI: The output is an array of key value pairs (e.g. response[0].Id), the keys being:
                  //Id
                  //StreetAddress
                  //Place
               }
         }
   }

We will use the data returned from this call to populate the drop-down box, so we replace the commented lines with:

	
document.getElementById("return").style.display = '';

     for (var i=0;i<=response.length-1;i++){
								
     var opt = document.createElement("option");

     document.getElementById("return").options.add(opt);
          opt.text = response[i].StreetAddress + ", " + response[i].Place;
          opt.value = response[i].Id;
     }

The first line of this code will show the drop-down menu; the rest will loop through the records and populate the drop-down box.

We’ll take a short break from functions at this point to add an event to our “find” button so we can call the function we’ve just created. Alter the button input in your form to read like this:

<input type="button" value="Find" onclick="Javascript: PostcodeAnywhere_Interactive_FindByPostcode_v1_00Begin('AA11-AA11-AA11-AA11', document.getElementById('postcode').value, '')">

Remember to put your own key in the code!

Back to our functions, we now need to add in the second function. This is the “Retrieve By ID With Email” function, and is used both to return a fully formatted address and to check the validity of the email address. Paste the function into your page:

function PostcodeAnywhere_Interactive_RetrieveByIdWithEmail_v1_10Begin(Key, Id, Email, Timeout, UserName)
   {
      var scriptTag = document.getElementById("PCA8b99d9a2ca124105878586eae82a9707");
      var headTag = document.getElementsByTagName("head").item(0);
      var strUrl = "";

      //Build the url
      strUrl = "http://services.postcodeanywhere.co.uk/PostcodeAnywhere/Interactive/RetrieveByIdWithEmail/v1.10/json.ws?";
      strUrl += "&Key=" + escape(Key);
      strUrl += "&Id=" + escape(Id);
      strUrl += "&Email=" + escape(Email);
      strUrl += "&Timeout=" + escape(Timeout);
      strUrl += "&UserName=" + escape(UserName);
      strUrl += "&CallbackFunction=PostcodeAnywhere_Interactive_RetrieveByIdWithEmail_v1_10End";

      //Make the request
      if (scriptTag) 
         {
            try
              {
                  headTag.removeChild(scriptTag);
              }
            catch (e)
              {
                  //Ignore
              }
         }
      scriptTag = document.createElement("script");
      scriptTag.src = strUrl
      scriptTag.type = "text/javascript";
      scriptTag.id = "PCA8b99d9a2ca124105878586eae82a9707";
      headTag.appendChild(scriptTag);
   }

function PostcodeAnywhere_Interactive_RetrieveByIdWithEmail_v1_10End(response)
   {
      //Test for an error
      if (response.length==1 && typeof(response[0].Error) != 'undefined')
         {
            //Show the error message
            alert(response[0].Description);
         }
      else
         {
            //Check if there were any items found
            if (response.length==0)
               {
                  alert("Sorry, no matching items found");
               }
            else
               {
                  //PUT YOUR CODE HERE
                  //FYI: The output is an array of key value pairs (e.g. response[0].Udprn), the keys being:
                  //Udprn
                  //Company
                  //Department
                  //Line1
                  //Line2
                  //Line3
                  //Line4
                  //Line5
                  //PostTown
                  //County
                  //Postcode
                  //Mailsort
                  //Barcode
                  //Type
                  //DeliveryPointSuffix
                  //SubBuilding
                  //BuildingName
                  //BuildingNumber
                  //PrimaryStreet
                  //SecondaryStreet
                  //DoubleDependentLocality
                  //DependentLocality
                  //PoBox
                  //CountryName
                  //Email
                  //MailServer
                  //ValidFormat
                  //FoundDnsRecord
                  //FoundServer
               }
         }
   }

We still need to do something with the returned data from this function. We’ll only use a few of the available returned fields in this example, but obviously you can use as many as you need. Replace the commented code with:

          document.getElementById("company").value= response[0].Company;
          document.getElementById("line1").value= response[0].Line1;
          document.getElementById("line2").value= response[0].Line2;
          document.getElementById("line3").value= response[0].Line3;
          document.getElementById("town").value= response[0].PostTown;
          document.getElementById("county").value= response[0].County;
          document.getElementById("postcode").value= response[0].Postcode;
          document.getElementById("VF").value= response[0].ValidFormat;
          document.getElementById("FDR").value= response[0].FoundDnsRecord;
          document.getElementById("FS").value= response[0].FoundServer;
          				
          if (document.getElementById("VF").value!="True")
               {
               alert("Please Enter An Email Address In A Valid Format");
               }
          else
          if (document.getElementById("FDR").value!="True")
               {
               alert("Email DNS record not found!");
               }
          else
          if (document.getElementById("FS").value!="True")
               {
               alert("Email server not found!");
               }
          

The first bit of code will fill the empty address boxes on our form, check each of the email address validation steps has been successful, and alert the user if it has not.

Finally, we need to put the call for this second function on an on-change event on our list box. To do this, alter your select field to look like this:

<select id=return style="display:none;" onchange="Javascript: PostcodeAnywhere_Interactive_RetrieveByIdWithEmail_v1_10Begin('AA11-AA11-AA11-AA11', getElementById('return').value, getElementById('email').value, '3', '')"> 

Remember to switch in your own key!

Step 4: You’re Done!

You should now have fully-functioning address look-up with built-in email validation.

Remember that if you need any help, you can reach our technical services department on 0800 047 0493. Otherwise, sit back and enjoy your cleaner database!