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

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.