International Telephone Input with Country Flags and Dial Codes using jQuery

You can use the telephone number input field in the web form where the user can provide their contact info. So, if the webform is available internationally. Therefore, the country dial Codes is mandatory for telephone input. Because the dialling code will be different for different countries. 

So, the user has to enter the phone number along with their country code. Therefore, you can add a dial code dropdown to the telephone input area. You can also allow the user to select their country code without manually typing.

Displaying the country flag and international dial code certainly makes telephone number input user-friendly. So, you can easily add country code selection box to the input field with national flags. In this tutorial, we will explain to you how you can implement an international telephone input field. Also, with flags and dial codes dropdown list using jQuery.

The International Telephone Number Input Area is a simple jQuery plugin. Therefore, you can add a dropdown list to the input field. Firstly, it will list all country names. Secondly, the national flags. And the international dial codes on the telephone input area. So, this plugin comes in handy when you need to provide a telephone input field for global users.

CSS

Firstly, in CSS attach the stylesheet file of the intlTelInput plugin. In addition, it will style the international telephone input dropdown list.

<link rel="stylesheet" href="css/intlTelInput.css">

HTML

Secondly, in HTML add an input field to admit the telephone input from the user. Furthermore, the country code dropdown list to this HTML element.

<input type="tel" id="phone">

JavaScript

Likewise, in javascript include the JS library of the International Telephone Input plugin.

<script src="js/intlTelInput.js"></script>

You can use the intlTelInput() method to initialize the International Telephone Input plugin. Then, It will replace an HTML input element with a dial code dropdown list and country flags.

<script>
var input = document.querySelector("#phone");
window.intlTelInput(input);
</script>

Basic Uses

The following example code snippet adds international telephone dial codes select box to the input field. Afterwards Use the  utilsScript  option and specify the  utils.jsscript URL to enable international formatting or validation.

var input = document.querySelector("#phone");
intlTelInput(input, {
    utilsScript: "js/utils.js"
});

Set Initial Country Based on IP address

Use the first country with the  geoIpLookup  option to set a default country dial code based on the user’s IP address.

For this advanced feature of the International Telephone Input plugin, you need to include a jQuery library.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Set the first  initialCountry option to  auto  and specify a custom function in the geoIpLookup lookup option. Use the ipinfo.io service that will look up the user’s country based on their IP address and set the initial dial code in the telephone input.

var input = document.querySelector("#phone");
intlTelInput(input, {
    initialCountry: "auto",
    geoIpLookup: function(success, failure) {
        $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) {
            var countryCode = (resp && resp.country) ? resp.country : "";
            success(countryCode);
        });
    },
    utilsScript: "js/utils.js"
});

Telephone Number Validation

First of all, Telephone number verification at the client-side is always a recommended step. Therefore, before submitting the user’s input to the server-side script. The following code shows you how to validate the number of international telephones.

Define the HTML elements with the Telephone Input field where the error/success message will be shown.

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

Even more, Use the  isValidNumber  method to check whether the user enters a valid telephone number based on the country code. Upon smear event, the telephone number verification function will be triggered.

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

// Error messages based on the code returned from getValidationError
var errorMap = [ "Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

// Initialise plugin
var intl = window.intlTelInput(input, {
    utilsScript: "js/utils.js"
});

var reset = function() {
    input.classList.remove("error");
    errorMsg.innerHTML = "";
    errorMsg.classList.add("hide");
    validMsg.classList.add("hide");
};

// Validate on blur event
input.addEventListener('blur', function() {
    reset();
    if(input.value.trim()){
        if(intl.isValidNumber()){
            validMsg.classList.remove("hide");
        }else{
            input.classList.add("error");
            var errorCode = intl.getValidationError();
            errorMsg.innerHTML = errorMap[errorCode];
            errorMsg.classList.remove("hide");
        }
    }
});

// Reset on keyup/change event
input.addEventListener('change', reset);
input.addEventListener('keyup', reset);

Configuration Options

Likewise, The  intlTelInput() gives you a lot of configuration options. So, you can modify and extend the functionality of the International Telephone Input plugin. Finally, here are some of the most beneficial options of the intlTelInput plugin are given below.

• autoHideDialCode – (Boolean) (Default: true) Delete the dialling code from the input field in initialization or submission.
• allowDropdown – (Boolean) (Default: true) If the dropdown is disabled. The dropdown list will not appear on the input element.
• autoPlaceholder – (String) (Default: polite) You have to set a placeholder in the input field.
• customPlaceholder – (Function) (Default: null) Change the auto placeholder with a custom string.
• excludeCountries – (Array) (Default: undefined) Show all countries except the specified ones.
• dropdownContainer – (String) (Default:”) Attach country dropdown to a specific element.
• formatOnDisplay – (Boolean) (Default: true) Delete the input value during initialization.
• geoIpLookup – (Function) (Default: null) Specify a custom function that looks up the user’s location.
• hiddenInput – (String) (Default:”) Add a hidden input with the given name, and on submit, populate it with the result of getting number.
• initialCountry – (String) (Default:”) Specify the country code to set the preparative country selection. Set it to “auto” to get the user’s location by IP address using the GeoIP lookup option.
• placeholderNumberType – (String) (Default: MOBILE) Specify the number type to use for placeholders.
• nationalMode – (Boolean) (Default: true) Permit the user to enter the number without international dial codes.
• onlyCountries – (Array) (Default: undefined) Show only specified countries.
• preferredCountries – (Array) (Default: [“us,” “GB”]) Specify the countries to seem at the top of the list.
• separateDialCode – (Boolean) (Default: false) Show the country dial code next to the selected flag.
• utilsScript – (String) (Default:”) Specify the given place to the libphonenumber script to enable validation/formatting.

Above all, are the most beneficial options of the intlTelInput plugins.

You can also read our previous blog- Load Data on Page Scroll from MySQL Database using jQuery Ajax PHP