Validation (Precise)

It is important to validate any user input before saving it to your backend. With International Telephone Input, there are two options for validation: (1) practical validation (which is more future-proof and suitable for most use cases), or (2) precise validation. The precise option is to use the isValidNumberPrecise method, which is a complex form of validation, with specific matching rules for each area code etc. Note that these rules change each month for various countries around the world, so you need to be careful to keep the plugin up-to-date else you will start rejecting valid numbers. This method returns a boolean for whether the number is valid or not. If it returns false, and you'd like more detail, you can then use the getValidationError method to get more information. This method returns an error code (integer), which you can then map to your own custom error message, as in the example below.

Both of these methods require the utils script to be loaded, which can be done by specifying the utilsScript option when initialising the plugin. The utils script contains a custom build of Google's libphonenumber library in JavaScript, which provides validation tools as well as formatting and placeholder number generation.

Markup

<input id="phone" type="tel">
<button class="button" id="btn" type="button">Validate</button>
<span id="valid-msg" class="hide">✓ Valid</span>
<span id="error-msg" class="hide"></span>

Code

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

// here, the index maps to the error code returned from getValidationError - see readme
const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

// initialise plugin
const iti = window.intlTelInput(input, {
  initialCountry: "us",
  utilsScript: "/intl-tel-input/js/utils.js?1713364227752"
});

const reset = () => {
  input.classList.remove("error");
  errorMsg.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.isValidNumberPrecise()) {
    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);