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="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></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.

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

5. The API to validate phone numbers.

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

$('input.phone-num').val(); //=> '+43'
$('input.phone-num').mobilePhoneNumber('validate'); //=> false

Changelog:

2018-10-16

• update to v1.0.7

2016-02-02

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

2015-06-26

• update to v1.0.6

2015-02-03

• update to v1.0.4

2014-09-06

• update to v1.0.3

2014-08-26

• update to v1.0.2

2014-07-15

• update to v1.0.1

2014-07-11

• 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.