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.js
script 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