Postcode Regex Test

by sbhomra

HTML

<form method="POST">
<select
  id="country-ed0b8d94-9101-4b5d-8579-a61cb4e6cf49"
  required=""
  class="hs-input"
  name="country"
  data-gtm-form-interact-field-id="4"
>
  <option disabled="" value="">Please Select</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Åland Islands">Åland Islands</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
  <option value="American Samoa">American Samoa</option>
  <option value="Andorra">Andorra</option>
  <option value="Angola">Angola</option>
  <option value="Anguilla">Anguilla</option>
  <option value="Antarctica">Antarctica</option>
  <option value="Antigua and Barbuda">Antigua and Barbuda</option>
  <option value="Argentina">Argentina</option>
  <option value="Armenia">Armenia</option>
  <option value="Aruba">Aruba</option>
  <option value="Australia">Australia</option>
  <option value="Austria">Austria</option>
  <option value="Azerbaijan">Azerbaijan</option>
  <option value="Bahamas">Bahamas</option>
  <option value="Bahrain">Bahrain</option>
  <option value="Bangladesh">Bangladesh</option>
  <option value="Barbados">Barbados</option>
  <option value="Belarus">Belarus</option>
  <option value="Belgium">Belgium</option>
  <option value="Belize">Belize</option>
  <option value="Benin">Benin</option>
  <option value="Bermuda">Bermuda</option>
  <option value="Bhutan">Bhutan</option>
  <option value="Bolivia">Bolivia</option>
  <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
  <option value="Botswana">Botswana</option>
  <option value="Bouvet Island">Bouvet Island</option>
  <option value="Brazil">Brazil</option>
  <option value="British Indian Ocean Territory">
    British Indian Ocean Territory
  </option>
  <option value="British Virgin Islands">British Virgin Islands</option>
  <option value="Brunei">Brunei</option>
  <option...

JavaScript

const countryField = document.getElementById("country-ed0b8d94-9101-4b5d-8579-a61cb4e6cf49");
const zipField = document.getElementById("zip-ed0b8d94-9101-4b5d-8579-a61cb4e6cf49");

if (countryField && zipField) {
  const handleZipValidation = () => {
    // A fairly comprehensive regex for UK postcodes that works with the HTML pattern attribute.
    const ukPostcodeRegex = "[A-Za-z]{1,2}[0-9][A-Za-z0-9]? ?[0-9][A-Za-z]{2}";

    if (countryField.value === "United Kingdom") {
      // Note: For HubSpot forms, simply setting the 'required' attribute might not be
      // enough to enforce validation. You might need to work with HubSpot's
      // validation events or API if this doesn't work as expected.
      zipField.setAttribute("pattern", ukPostcodeRegex);
    } else {
      zipField.removeAttribute("pattern");
						zipField.setCustomValidity(""); // Clear custom validity if country changes
    }
  };

  zipField.addEventListener("invalid", () => {
        if (zipField.validity.patternMismatch && countryField.value === "United Kingdom") {
          zipField.setCustomValidity("Please enter a valid UK postcode.");
        }
      });

      // Clear custom validity message on input, so the browser can re-validate.
      zipField.addEventListener("input", () => {
        zipField.setCustomValidity("");
      });

  countryField.addEventListener("change", handleZipValidation);
  handleZipValidation(); // Also run on initial load
}