Intl-tel-input

International Telephone Input

It is a jQuery plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user’s country, displays a relevant placeholder and provides formatting/validation methods.

It is also widely known as intl-tel-input.

Below is some of its advanced features:

  • Provides a very friendly user interface to enter a phone number. All countries are shown as a drop list with the flags and suggestion phone number
  • Provides up-to-date patterns of phone numbers in the world. The data are taken from Google libphonenumber library so they are completely stable.
  • Has a few APIs to validate and integrate with other tools

How to use:

1) Download the latest release for intl-tel-input. You can download it from https://github.com/jackocnr/intl-tel-input/releases/tag/v9.0.0 .

2) Include the stylesheet:

<link rel=”stylesheet” href=”path_to_intlTelInput.css”>

3) Override the path to flags.png in your CSS :

.iti-flag {background-image: url(“path_to_flags.png”);}

4) Add the plugin script and initialise it on your input element:

 

Full width input
If you want your input to be full-width, you need to set the container to be the same i.e.

.intl-tel-input {width: 100%}

A sample working example using intl-tel input: (phoneDemo.html)

Some Useful Options:

1) autoPlaceholder
Type:
Boolean

Default: true
Set the input’s placeholder to an example number for the selected country. If there is already a placeholder attribute set on the input then that will take precedence. Requires the utilScript option.

For Example:

2) utilsScript
Type:
String

Default:””

Example : “build/js/utils.js”
Enable formatting/validation etc. by specifying the path to the included utils.js script ,which is fetched only when the page has finished loading (on window.load) to prevent blocking.

3) isValidNumber
It Validate the current number present in the textbox. Expects an internationally formatted number unless ‘national mode’ is enabled. If validation fails, you can use getValidationError to know about the error occured. Requires the utilScript option.

Var isValid = $(“#phone”).intlTelInput(“isValidNumber”);

Returns: true/false

Utilities Script

It uses a custom build of Google’s libphonenumber which enables the following features:

  • Formatting upon initialisation
  • Validation with isValidNumber, getNumberType and getValidationError methods

Specifying utilsScript in Code:

NOTE: util.js file is from google’s libphonenumber library.


Applying Validations on the phone number field

Given below is a demo example for applying validation on the intl-tel-input field:

If someone still face any problem while using intl-tel input, you can get the above working example from the github repo: https://github.com/knoldus/intl-tel-input-example , including all the required files.

References:

1) https://github.com/jackocnr/intl-tel-input

2) https://jqueryvalidation.org/

Written by 

Sangeeta is a Software Consultant and has experience of more than 2 years. She was successful in winning the inter-college competition: Venture Exposition (Project Presentation) in Innotech-Technical Event, at LBSIM. She is familiar with different technologies which include Scala, Java, Play Framework, Hadoop, Spark, HTML, CSS, Javascript. Her Hobbies include dancing, painting and practicing yoga.

Leave a Reply

%d bloggers like this: