May 29, 2020

How to Format Phone Number in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to format phone number in javascript. When we develop a website where visitors from all around the world can register, we have to make sure that our registration form is user-friendly.

Asking for a phone number in a registration form is not something that everybody does, but it is extremely important to have one because it provides the user an extra option for account recovery or receiving some sort of important notification in the form of SMS.

As you know different countries have different formats for phone numbers and implementing each and every one of them in your web application is going to consume a good amount of time. That is when the third-party libraries come into play such as Cleave JS.

Cleave JS is mainly used to correct the format of credit card, date, time, and phone number. Please check out the documentation page to learn more about it.

In the following example, we have an input field and right next to it, we have a dropdown list that contains country codes of 3 countries. We will enter some random phone number in the input field and format it depending upon the selection of the country code. Please have a look over the code example and the steps given below.

HTML & CSS

We have 4 elements in the HTML file (div, select, option, and input). The div element is just a wrapper for the rest of the elements.
The dropdown list contains country codes of the United States, United Kingdom, and Australia.

We have downloaded the Cleave JS library and included that at the bottom of the HTML file using the script tag.
Cleave JS contains the core functionality but to format phone number, we also need cleave-phone.i18n.js. We have downloaded and included it in the HTML file using the script tag.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.

We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>
        <input type="text">
        <select>
            <option value="US">US</option>
            <option value="GB">GB</option>
            <option value="AU">AU</option>
        </select>
    </div>

    <script src="js/cleave.min.js"></script>
    <script src="js/cleave-phone.i18n.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

input, select {
    display: inline-block;
    padding: 10px 20px;
}

Javascript

We have selected the select element using document.querySelector() method and stored it in the select variable.

We have initialized Cleave JS using Cleave() constructor. This constructor takes 2 parameters. The first parameter is the CSS selector of the field where the user will enter the phone number. In our case, it is an input element. The second parameter is an options object. The first option phone is set to true which means we want to use the phone number formatting feature of Cleave JS. The second option phoneRegionCode is set to "US" which means by default any phone number entered in the input field will be formatted according to US phone number format.
We have attached the change event listener to the select element.
In the event handler function, we are calling the setPhoneRegionCode() method and passing it the value of the selected option. Depending upon the selected option, it will change the format of the phone number in the input field.

We are calling the setRawValue() method with an empty string as a parameter. It will clear the data in the input field. As a result, when the user will start entering the phone number again, the phone number will be formatted depending upon the region code or country code set by the setPhoneRegionCode() method.

let select = document.querySelector('select');

let cleave = new Cleave('input', {
    phone: true,
    phoneRegionCode:'US'
});

select.addEventListener('change', function () {
    cleave.setPhoneRegionCode(this.value);
    cleave.setRawValue('');
})

You May Also Like: