How to make a proper zip code validation?

My task: Make a zip code validation 

Hi, today I had a task to make a zip code validation. And not just the standard required field and regex stuff. I had to check if the zip code is actually real. I work on a Magento project therefore there are a lot of sales going on. Customers sometimes makes mistakes by entering the wrong zip code, sometimes they even do it on purpose for some reasons. So we needed something to help prevent them in cases they make the mistakes and prevent also to prevent them entering the fake ones. This would also help the support people their life much easier.

Example scenario

A customer enters his address and let’s say, chooses United States as their country and Alabama as the state. But they enter 35090 instead of 35091 for the zip code. With a regex you can’t validate that this is a correct one. It’s close, but not valid for Alabama in this case.

What do we do?

Let’s see what are the options here. First solution we can find a zip code database somewhere on the internet and make our own validation. But that would be a lot of unnecessary work for us and lots of things can go wrong here. A bit nicer solution would be to use an external service that would provide us with an easy to use validation. I used Zippopotamus Cloud the global postal/zip code API. You can visit their site and see the usage examples. I’ll provide you with another solution used in this case.

Solution

I’ll explain it as simple as possible. It’s a magento 2 project so I won’t copy paste the whole code in order not to confuse you here, we don’t need that. I’ll show only the important part and you will easily incorporate it into your project.

First of all we have a form with a zip code input. Second, we need to do your validation after the user clicks the button to submit the data and the actual submit. So in my javascript file I made an onclick event for the submit button.

$(document).on('click', 'form button[type=submit]', function(e){
    //validation goes here
    //return true or false depending how the validation goes 
    return result;
});

Now we need to get our data like county code, state code and the zip code.

var zipcode = $('#zip').val();
var country = $('#country option:selected').val();
var state = $('#state option:selected').val();

The next step is to use the Zippopotamus API, validate everything and return the result, optionally show some validation messages if the validation doesn’t go well. Finally, here is the complete solution.

Final code


$(document).on('click', 'form button[type=submit]', function(e){
  $("#zipcode_error").remove();

  var zipcode = $('#zip').val();
  var country= $('#country option:selected').val();
  var state = $('#state option:selected').val();

  var result = false;
  var apiUrl = "https://api.zippopotam.us/" + country + '/' + zipcode;

  $.ajax({
        type: "GET",
        url: apiUrl,
        async: false,
        success: function(data, status) {
           if(data !== false){
              var places = data.places;
              places.forEach(function(place) {
                  var zipCodeState = place['state abbreviation'];
                  if (zipCodeState == state) {  
                      result = true;
                  } 
              });
           } 
       } 
  });
  if (!result) {
     $('#zip').after('
<div generated="true" id="zipcode_error" style="margin-top: 7px;color: #e02b27;font-size: 1.2rem;">Please select a zip code within your state</div>;'); 
  }
  return result;
});

Conclusion and Code explanation

Remove any error messages at the beginning in case we already showed one. Second, we get all the data we need. We set the initial result value to false and the api url for the request. The api doesn’t offer a possibility send out the state also but they return the states so I used them for the validation. I looped through the response array and compared it with the selected state. If there is a match, the result is set to true and if not I show a simple error message and return the result false. As a result, we have a nice zip code validation done. Most of all I hope this article helped some of you, if it did I’m happy 😀

Leave a Reply

Your email address will not be published. Required fields are marked *