demo.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>International Telephone Input</title>
    <link rel="stylesheet" href="build/css/intlTelInput.css" />
    <link rel="stylesheet" href="build/css/demo.css" />
  </head>

  <body>
    <h1>International Telephone Input</h1>
    <form>
      <input id="phone" name="phone" type="tel" value="" />
      <button class="button" id="btn" type="button">Validate</button>
      <span id="valid-msg" class="hide"></span>
      <span id="error-msg" class="hide"></span>
    </form>

    <script src="build/js/intlTelInputWithUtils.js"></script>
    <script>
      const input = document.querySelector("#phone");
      const iti = window.intlTelInput(input, {
        // allowDropdown: false,
        // autoPlaceholder: "off",
        // containerClass: "test",
        // countryOrder: ["jp", "kr"],
        // countrySearch: false,
        // customPlaceholder: function(selectedCountryPlaceholder, selectedCountryData) {
        //   return "e.g. " + selectedCountryPlaceholder;
        // },
        // dropdownContainer: document.querySelector('#custom-container'),
        // excludeCountries: ["us"],
        // fixDropdownWidth: false,
        // formatAsYouType: false,
        // formatOnDisplay: false,
        // geoIpLookup: function(callback) {
        //   fetch("https://ipapi.co/json")
        //     .then(function(res) { return res.json(); })
        //     .then(function(data) { callback(data.country_code); })
        //     .catch(function() { callback(); });
        // },
        // hiddenInput: () => ({ phone: "phone_full", country: "country_code" }),
        // i18n: { 'de': 'Deutschland' },
        initialCountry: "us",
        // loadUtils: () => import("/build/js/utils.js"), // leading slash (and http-server) required for this to work in chrome
        // nationalMode: false,
        // onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
        // placeholderNumberType: "MOBILE",
        // showFlags: false,
        // separateDialCode: true,
        // strictMode: true,
        // useFullscreenPopup: true,
        // validationNumberTypes: null,
      });
      window.iti = iti; // useful for testing

      const button = document.querySelector("#btn");
      const errorMsg = document.querySelector("#error-msg");
      const validMsg = document.querySelector("#valid-msg");
      const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

      const reset = () => {
        input.classList.remove("error");
        errorMsg.innerHTML = "";
        validMsg.innerHTML = "";
        errorMsg.classList.add("hide");
        validMsg.classList.add("hide");
      };

      const showError = (msg) => {
        input.classList.add("error");
        errorMsg.innerHTML = msg;
        errorMsg.classList.remove("hide");
      };

      // on click button: validate
      button.addEventListener('click', () => {
        reset();
        if (!input.value.trim()) {
          showError("Required");
        } else if (iti.isValidNumber()) {
          validMsg.innerHTML = "Valid number: " + iti.getNumber();
          validMsg.classList.remove("hide");
        } else {
          const errorCode = iti.getValidationError();
          const msg = errorMap[errorCode] || "Invalid number";
          showError(msg);
        }
      });

      // on keyup / change flag: reset
      input.addEventListener('change', reset);
      input.addEventListener('keyup', reset);
    </script>
  </body>
</html>