https://inct.nl/static/js/going-postalcode.js?v=1

1// Version: 13/09/2019 15:49
2(function ($) {
3  $.validatePostalCode = function (options) {
4    var settings = $.extend(
5      {
6        postalCodeInputElem: null, // Element for postalcode input
7        countrySelectElem: null, // Element for country selection (can be <select> or <input type="radio">)
8        streetInputElem: null, // Element for street input
9        cityInputElem: null, // Element for city input
10        streetCityContainer: null, // Element that contains both the street and city input elements (for hiding purposes)
11        correctionElem: null, // Element that allows enabling of the street and city input fields
12        disableStreetAndCity: false, // Disables the street and city input elements when the API has entered values
13        hideStreetCityContainer: false, // Hides the streetCityContainer and shows it after the API returns data
14      },
15      options
16    );
17
18    if (settings.hideStreetCityContainer && settings.streetCityContainer === null) {
19      console.log("No streetCityContainer found. Either set hideStreetCityContainer to false or supply a valid streetCityContainer");
20      return;
21    }
22
23    if (settings.postalCodeInputElem === null) {
24      console.log("Missing valid postalCodeInputElem.");
25      return;
26    } else if (settings.streetInputElem === null) {
27      console.log("Missing valid streetInputElem.");
28      return;
29    } else if (settings.cityInputElem === null) {
30      console.log("Missing valid cityInputElem.");
31      return;
32    }
33
34    if (settings.disableStreetAndCity && settings.correctionElem === null) {
35      console.log("No valid correctionLinkElem found.");
36      return;
37    }
38
39    var $postalcodeElem = $(settings.postalCodeInputElem);
40    var $addressElem = $(settings.streetInputElem);
41    var $cityElem = $(settings.cityInputElem);
42    var $streetCityContainer = $(settings.streetCityContainer);
43    var $correctionLinkElem = $(settings.correctionElem);
44    var $countrySelectElem = settings.countrySelectElem ? $(settings.countrySelectElem) : null;
45
46    if ($postalcodeElem.length === 0) console.warn("Postalcode element not found.");
47    if ($addressElem.length === 0) console.warn("Address element not found.");
48    if ($cityElem.length === 0) console.warn("City element not found.");
49    if ($streetCityContainer.length === 0) console.warn("Street & city container element not found.");
50    if ($correctionLinkElem.length === 0) console.warn("Correction link element not found.");
51
52    if (settings.hideStreetCityContainer) $streetCityContainer.hide();
53    else {
54      $streetCityContainer.show();
55      if (settings.correctionElem && !settings.disableStreetAndCity) {
56        $correctionLinkElem.hide();
57      }
58    }
59
60    if (settings.countrySelectElem !== null) {
61      $countrySelectElem.on("change", function () {
62        var selectedCountry = $(this).val();
63        setValidationAndBehavior(selectedCountry);
64      });
65    }
66
67    $postalcodeElem.bind("input", function () {
68      $(this).val(function (_, v) {
69        return v.replace(/\s+/g, "");
70      });
71    });
72
73    var postalCodeValue = "";
74
75    $postalcodeElem.on("keydown", function () {
76      postalCodeValue = $postalcodeElem.val();
77    });
78
79    $postalcodeElem.on("keyup", function () {
80      // Don't trigger if it's the same value as before
81      if ($postalcodeElem.val() !== postalCodeValue) getPostalCode($(this));
82    });
83
84    // If the postalcode field is filled, we need to call the API
85    if ($postalcodeElem.length === 1 && $postalcodeElem.val().length !== 0) {
86      getPostalCode();
87    }
88
89    function setValidationAndBehavior(selectedCountry) {
90      if (selectedCountry === "Nederland" || selectedCountry === "Netherlands") {
91        if ($postalcodeElem.val() == "") {
92          $correctionLinkElem.slideUp();
93          $streetCityContainer.slideUp();
94        } else if ($postalcodeElem.val().length === 6) {
95          getPostalCode();
96        }
97
98        $postalcodeElem.removeClass("postalcodeBE").addClass("postalcodeNL");
99      } else if (selectedCountry == "België") {
100        $correctionLinkElem.hide();
101        $postalcodeElem.removeClass("postalcodeNL").addClass("postalcodeBE");
102        $addressElem.prop("readonly", false);
103        $cityElem.prop("readonly", false);
104        $streetCityContainer.slideDown();
105      } else {
106        $correctionLinkElem.hide();
107        $postalcodeElem.removeClass("postalcodeNL").removeClass("postalcodeBE");
108        $addressElem.prop("readonly", false);
109        $cityElem.prop("readonly", false);
110        $streetCityContainer.slideDown();
111      }
112    }
113
114    function getPostalCode() {
115      $postalcodeElem.val($postalcodeElem.val().toUpperCase());
116
117      var postcode = $postalcodeElem.val();
118
119      if (postcode.length > 5) {
120        if ($countrySelectElem !== null) {
121          // need to check if it's a select or checkbox
122          var isRadio = $countrySelectElem.prop("type") === "radio";
123
124          var countrySelectVal = isRadio ? $countrySelectElem.filter(":checked").val() : $countrySelectElem.val();
125        }
126
127        if ($countrySelectElem === null || countrySelectVal === "Nederland" || countrySelectVal === "Netherlands") {
128          $streetCityContainer.slideUp();
129
130          delay(function () {
131            $.getJSON(window.linkPrefix + "/sales/check/postcode/" + postcode)
132              .done(function (data) {
133                if (data.status === "ok") {
134                  $streetCityContainer.slideDown();
135
136                  $correctionLinkElem.click(function (evt) {
137                    evt.preventDefault();
138
139                    $addressElem.prop("readonly", false);
140                    $cityElem.prop("readonly", false);
141                    $correctionLinkElem.hide();
142                  });
143
144                  if (typeof data.street === "undefined") {
145                    $addressElem.prop("readonly", false);
146                    $cityElem.prop("readonly", false);
147                  }
148
149                  $addressElem.val(data.street).change();
150                  $cityElem.val(data.city).change();
151
152                  if (settings.disableStreetAndCity) {
153                    $addressElem.prop("readonly", true);
154                    $cityElem.prop("readonly", true);
155                    $correctionLinkElem.fadeIn();
156                  }
157
158                  $addressElem.valid();
159                  $cityElem.valid();
160                } else {
161                  $addressElem.val("").change();
162                  $cityElem.val("").change();
163
164                  $addressElem.prop("readonly", false);
165                  $cityElem.prop("readonly", false);
166
167                  $correctionLinkElem.hide();
168                  $streetCityContainer.slideDown();
169                }
170              })
171              .fail(function () {
172                $addressElem.val("").change();
173                $cityElem.val("").change();
174
175                $addressElem.prop("readonly", false);
176                $cityElem.prop("readonly", false);
177
178                $correctionLinkElem.hide();
179                $streetCityContainer.slideDown();
180              });
181          }, 500);
182        }
183      }
184    }
185  };
186})(jQuery);
187

188var delay = (function () {
189  var timer = 0;
190  return function (callback, ms) {
191    clearTimeout(timer);
192    timer = setTimeout(callback, ms);
193  };
194})();