Intl-tel-input

Table of contents

Reading Time: 2 minutes

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:

<script src="path_to_jquery-2.2.0.min.js"></script>
<script src="path_to_intlTelInput.js"></script>
<script> $("#phone").intlTelInput();</script>

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)

<head>
<link rel="stylesheet" href="intl-tel-input-9.0.0 (2)/build/css/intlTelInput.css">
<style>
   .iti-flag {background-image: url("/home/knodus/Downloads/intl-tel-input-9.0.0 (2)/build/img/flags.png");}
</style>
</head>
<body>phone number
<input type="tel" id="phone">
</body>
   <script src="jquery-2.2.0.min.js"></script>
   <script src="intl-tel-input-9.0.0 (2)/build/js/intlTelInput.js"></script>
   <script>
     $("#phone").intlTelInput();
  </script>

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:

    var telInput = $(“#phone);
    telInput.intTelInput({
       utilsScript: “path_to_utils.js”, //file from google’s libphonenumber library
    autoPlaceholder:true
    });

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:

    var telInput = $(“#phone);
    telInput.intTelInput({
    utilsScript: “path_to_utils.js”
    });

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:

<head>
<link rel="stylesheet" href="intl-tel-input-9.0.0 (2)/build/css/intlTelInput.css">
<style>
.iti-flag {background-image: url("intl-tel-input-9.0.0 (2)/build/img/flags.png");}
</style>
</head>
<body>
<form id="userPhoneForm" role="form" method="post" >
phone number
<input type="tel" id="phone" name="phone">
<span class="input-group-btn" style="color:red;">
<button class="addPhoneSubmit" type="submit" onclick="validate()">Add Phone Number </button>
<div id ="userPhoneDiv" ></div>
</span>
</form>
</body>
<script src="jquery-2.2.0.min.js"></script>
<script src="jquery.validate.min.js"></script>
<script src="intl-tel-input-9.0.0 (2)/build/js/intlTelInput.js"></script>
<script src="libphonenumber/utils.js"></script>
<script type="text/javascript">
$.validator.addMethod("phoneNumValidation", function(value) {
    return $("#phone").intlTelInput("isValidNumber")
}, 'Please enter a valid number');
var validate = function() {
$("#userPhoneForm").validate({
rules: {
phone: {
required: true,
phoneNumValidation: true
}
},
messages: {
phone: {
required: "Phone number is required field."
}
},
errorPlacement : function(error, element) {
error.insertAfter($("#userPhoneDiv"));
}
});
}
$(document).ready(function() {
   console.log("in ready");
   $("#phone").intlTelInput({utilsScript: "libphonenumber/utils.js"});

});
</script>

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/