National mode option

In general, people are more familiar with thinking about phone numbers in national format (without having to worry about international dial codes). International Telephone Input supports users entering their number in this format to provide a better user experience. They just have to select the right country from the dropdown. After the user has entered their number, the plugin can give you the full standardised international number to save to your backend.

You can encourage users to enter their number in national format by enabling nationalMode, which will display the placeholder (and later, any saved numbers) in national format. We can then use getNumber to get the full international number to save to the backend. Note that getNumber only works with valid numbers, so we must first ensure the number is valid using isValidNumber.

Markup

<p id="output">Please enter a valid number below</p>
<input id="phone" type="tel">

Code

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

const iti = window.intlTelInput(input, {
  initialCountry: "us",
  nationalMode: true,
  utilsScript: "/intl-tel-input/js/utils.js?1713364227752" // just for formatting/placeholders etc
});

const handleChange = () => {
  let text;
  if (input.value) {
    text = iti.isValidNumber()
      ? "Valid number! Full international format: " + iti.getNumber()
      : "Invalid number - please try again";
  } else {
    text = "Please enter a valid number below";
  }
  const textNode = document.createTextNode(text);
  output.innerHTML = "";
  output.appendChild(textNode);
};

// listen to "keyup", but also "change" to update when the user selects a country
input.addEventListener('change', handleChange);
input.addEventListener('keyup', handleChange);