const input = document.querySelector("#phone");
const output = document.querySelector("#output");

const iti = window.intlTelInput(input, {
  initialCountry: "us",
  nationalMode: true,
  strictMode: true,
  loadUtils: () =>
    import(
      "https://cdn.jsdelivr.net/npm/intl-tel-input@25.11.2/build/js/utils.js"
    ), // for formatting/placeholders etc
});

// validation function
const handleBlur = () => {
  output.innerHTML = ""; // clear previous messages

  if (input.value.trim() && !iti.isValidNumber()) {
    const textNode = document.createTextNode(
      "Please enter a valid number above"
    );
    output.appendChild(textNode);
  }
};

// validate only when the user leaves the input field
input.addEventListener("blur", handleBlur);