Vanilla JavaScript example

Single country

Overview

Even if you only need to handle numbers from a single country, the library still earns its keep. It provides:

A country-specific example number for the placeholder
Format-as-you-type
Validation

In this example we've set onlyCountries to a single country, set countrySelectorMode to "OFF", disabled showFlags and separateDialCode, and set numberDisplayFormat to "NATIONAL". Play with these options in the Playground.

Note: the toast shown when input is rejected isn't part of the library — see the strict:reject event docs for an example of how to wire one up yourself.

Demo

Note: by default, validation only considers mobile and fixed line numbers as valid. See allowedNumberTypes option for more information.

Html

<form id="form">
  <label for="phone">Phone number</label>
  <input id="phone" name="phone" type="tel">
  <button type="submit">Submit</button>
</form>
<div id="error-msg"></div>
<div id="valid-msg"></div>

JavaScript

getErrorMessage is up to you - see a worked example.

import intlTelInput from "intl-tel-input";

const form = document.querySelector("#form");
const input = document.querySelector("#phone");
const errorMsg = document.querySelector("#error-msg");
const validMsg = document.querySelector("#valid-msg");

const iti = intlTelInput(input, {
  onlyCountries: ["us"],
  countrySelectorMode: "OFF",
  showFlags: false,
  separateDialCode: false,
  numberDisplayFormat: "NATIONAL",
  loadUtils: () => import("intl-tel-input/utils"),
});

// wait for utils to load before calling isValidNumber
await iti.promise;

form.addEventListener("submit", (e) => {
  e.preventDefault();

  if (iti.isValidNumber()) {
    validMsg.textContent = `Full number: ${iti.getNumber()}`;
    errorMsg.textContent = "";
  } else {
    const errorCode = iti.getValidationError();
    // your code here to map the errorCode to a user-facing message
    errorMsg.textContent = getErrorMessage(input.value, errorCode);
    validMsg.textContent = "";
  }
});

import intlTelInput from "intl-tel-input";

const form = document.querySelector("#form");
const input = document.querySelector("#phone");
const errorMsg = document.querySelector("#error-msg");
const validMsg = document.querySelector("#valid-msg");

// initialise library
const iti = intlTelInput(input, {
  onlyCountries: ["us"],
  countrySelectorMode: "OFF",
  showFlags: false,
  separateDialCode: false,
  numberDisplayFormat: "NATIONAL",
  loadUtils: () => import("intl-tel-input/utils"),
});

// wait for utils to load before calling isValidNumber
await iti.promise;

let showValidation = false;
let submitted = false;

const updateUI = () => {
  if (!showValidation) return;

  const isValid = iti.isValidNumber();

  let invalidMsg = "";
  if (!isValid) {
    const errorCode = iti.getValidationError();
    // your code here to map the errorCode to a user-facing message
    invalidMsg = getErrorMessage(input.value, errorCode);
  }
  errorMsg.textContent = invalidMsg;

  validMsg.textContent = isValid && submitted ? `Full number: ${iti.getNumber()}` : "";
};

// on submit: validate (and show "Full number" if valid)
form.addEventListener("submit", (e) => {
  e.preventDefault();
  showValidation = true;
  submitted = true;
  updateUI();
});

// on blur: enable validation UI
input.addEventListener("blur", () => {
  showValidation = true;
  updateUI();
});

// while typing / pasting / changing country: remove any submitted state and update validity state
input.addEventListener("input", () => {
  submitted = false;
  updateUI();
});