Getting an existing object of International Telephone Input

“International Telephone Input” is a great and popular JS plugin for advanced phone inputs in forms.

It adds a country (flag) dropdown to the phone field. It also provides some useful functions, like getting the international version of a local phone number and input validation.

I recently needed to access an existing object of International Telephone Input. Meaning, getting an intlTelInput object that has already been initialized. This may be necessary if we plan to use intlTelInput functions (such as isValidNumber()) in another function or script.

To initilaze the intlTelInput object, we would use something like:

const telInput = document.querySelector('#mobile');

window.intlTelInput(telInput, {
	// Initialization options.
});

We can access this existing intlTelInput object later by using the getInstance function:

const telInput = document.querySelector('#mobile');
const iti = window.intlTelInputGlobals.getInstance(telInput);

We will then be able to use the functions of International Telephone Input on this iti element as usual. For example:

iti.isValidNumber();

References#

References