Learning jQuery

Earlier I had posted about "Validate phone numbers using jQuery" but that code just validates for valid input, it doesn't check for format of phone number. But recently a jQuery plugin named "International Telephone Input"is released which validates all the international phone numbers along with country code.

International Telephone Input jQuery plugin for entering international telephone numbers. It adds a flag dropdown to any input, which lists all the countries and their international dial codes next to their flags.

You may also like:

• Validate Email address using jQuery
• Validate Date using jQuery
• Validate Date of Birth is not greater than current date using jQuery
• End Date should not be less than Start Date using jQuery Date Picker

Features

• In the country dropdown you can navigate by typing, or using the up/down keys
• Selecting a country from the dropdown will update the dial code in the input
• Typing a different dial code automatically updates the displayed flag
• Country names in the dropdown also include localised versions in brackets
• Lots of initialisation options for customisation, as well as public methods for interaction

How to use it?

To use this plugin, all you need to do is to download the latest version and then link the required stylesheet and reference to plugin library.

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

Add the plugin script and initialise it on your input element

<input type="tel" id="mobile-number">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="build/js/intlTelInput.min.js"></script>
<script>
  $("#mobile-number").intlTelInput();
</script>

Examples

• Validation:
  Use Google's libphonenumber for validation
• Lookup user's country:
  Use IP address lookup to set the default country to the user's country
• Country sync:
  Access the country data to create a separate country dropdown for an address form, and then listen for change events to keep the two dropdowns in sync
• European countries:
  Only show European country codes
• Styling:
  Displays the two different styling settings
• Modify country data:
  Modify the data to only show localised country names

This jQuery plugins also provides options for customization like for setting default country, dial code delimiter and many more. You can visit the official website for more information.

Feel free to contact me for any help related to jQuery, I will gladly help you.