In a client project, I had to ask the phone number of the users. Issue is these users could be located anywhere in the world so the phone prefix wouldn’t be the same for all of them. I managed to fix this “problem” by using a very useful jQuery plugin called “intl-tel-input”, let’s see how to integrate it on your website 😉

Feel free to check the demo I’ve put in place here :

See Demo

As you can see, it appends a flag selector to your input and can check if the phone number entered by the user is valid or not.

How to Integrate intl-tel-input with jQuery in your website?

Start by downloading the last version of intl-tel-input on the author’s GitHub. Download and extract the ZIP and open the folder “build”.

First of all, a few files need to be transferred to your website.

There are 2 Javascript files :

  • build/js/intlTelInput-jquery.min.js
  • build/js/utils.js

One CSS file :

  • build/css/intlTelInput.min.css

And finally, the build/img folder and its content.

Then, import these files in your code. For the CSS :

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

For the JS, after your jQuery import :

<script src="js/intlTelInput-jquery.min.js"></script>

The last JS file (utils.js) will not be imported from the HTML but from the jQuery script itself. We will see that in this tutorial later 😉

Now, let’s write some HTML for our form and phone input. Here is the one I use in the demo :

<form>
	<input id="phone" name="phone" type="tel">
	<button type="submit" class="btn btn-primary btn-sm btn-send">CHECK</button>
</form>

The most important parts here are to specify an input of type “tel” with an ID (or a class) to target it with the jQuery plugin. I have also added a submit button that we will use in our jQuery code to check if the phone number entered by the user is valid or not.

We now have imported our files and written our HTML. Let’s start with the actual jQuery code that will make the magic happen on our page.

As I said just before, we have two parts to do in our jQuery code. The first one is simply applying the jQuery plugin “intl-tel-input” on our phone input, here is the code to do that :

var phoneInput = $("#phone").intlTelInput({
	utilsScript: "js/utils.js"
});

In this code, I target our input with the ID #phone and call intlTelInput on it. Then, we pass the js/utils we imported earlier as a parameter to the plugin. This part is really important otherwise, some features of the plugin won’t work (so make sure to have imported js/utils.js on your website).

After calling the plugin, if you reload the page, you should see the result in action, with the flag selector appended to your phone input.

The last part of this tutorial is now to check if the phone number is valid or not. We can also do that with the plugin, no need to write a specific function for that.

In my tutorial, I do that by adding a click event on my HTML submit button “.btn-send” and call the “isValidNumber” function of the plugin to check if the phone is valid. Then, I show a basic JS alert with a message to let the user know if the phone he entered is correct or not :

$(".btn-send").click(function(e) {
	
	e.preventDefault();
	
	if($("#phone").intlTelInput("isValidNumber")) {
		alert("It's a valid number, congrats!");
	} else {
		alert("Not a valid number :-( ... Try with (201) 512-1818");
	}
	
});

That’s it for this tutorial. It was not that hard, isn’t it 😉

There are many options that can be passed to this script. You can find the list of these options on the author’s Github, in the documentation.

At the time where I write this article, the author seems to have removed the jQuery documentation from the last version, but you can still access it from here.

Feel free to download the sources of the demo here :

Download Sources

If you have any questions, need any help or want to say something, feel free to leave a comment below…

… and don’t forget to subscribe if you want to receive new unique tutorials and source codes directly on your email :