International Phone Number Input Plugin with jQuery - mobilePhoneNumber

File Size: 27.6 KB
Views Total: 21787
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
International Phone Number Input Plugin with jQuery - mobilePhoneNumber

mobilePhoneNumber is a jQuery phone number input mask plugin that automatically formats and validates international phone numbers when an user is typing.

Basic Usage:

1. Include the necessary jQuery library and jQuery caret plugin on the web page.

<script src=""></script>
<script src="vendor/jquery.caret.js"></script>

2. Make sure you have loaded the jQuery mobilePhoneNumber plugin after jQuery library.

<script src="lib/jquery.mobilePhoneNumber.js"></script>

3. Create a phone number input on your web page.

<input type="tel" class="tel" pattern="\d*" x-autocompletetype="tel" placeholder="Mobile Phone Number" autofocus>

4. Create a container element to display the country code based on your users typed.

<div class="country"></div>

4. The javascript.

var input = $('[type=tel]')
input.mobilePhoneNumber({allowPhoneWithoutPrefix: '+1'}); // U.S.
input.bind('country.mobilePhoneNumber', function(e, country) {
$('.country').text(country || '')

5. The API to validate phone numbers.

$('').val(); //=> '+1 (415) 123-5554'
$('').mobilePhoneNumber('validate'); //=> true

$('').val(); //=> '+43'
$('').mobilePhoneNumber('validate'); //=> false



  • update to v1.0.7


  • update to v1.0.7
  • Fix issue where initial formatting would add a + when the input was empty


  • update to v1.0.6


  • update to v1.0.4


  • update to v1.0.3


  • update to v1.0.2


  • update to v1.0.1


  • Fixed bug with country state

This awesome jQuery plugin is developed by stripe. For more Advanced Usages, please check the demo page or visit the official website.