Example 1: Validation

Use public isValidNumber method (utilising Google's libphonenumber) to validate the telephone number on the change event.

✓ Valid Invalid number

Code

<input id="phone" type="tel">
			<span id="valid-msg" class="hide">✓ Valid</span>
			<span id="error-msg" class="hide">Invalid number</span>
var telInput = $("#phone"),
			  errorMsg = $("#error-msg"),
			  validMsg = $("#valid-msg");
			
			// initialise plugin
			telInput.phoneInput({
			  utilsScript: "js/utils.js"
			});

			var reset = function() {
			  telInput.removeClass("error");
			  errorMsg.addClass("hide");
			  validMsg.addClass("hide");
			};
			
			// on blur: validate
			telInput.blur(function() {
			  reset();
			  if ($.trim(telInput.val())) {
				if (telInput.phoneInput("isValidNumber")) {
				  validMsg.removeClass("hide");
				} else {
				  telInput.addClass("error");
				  errorMsg.removeClass("hide");
				}
			  }
			});
			
			// on keyup / change flag: reset
			telInput.on("keyup change", reset);

Example 2: Lookup user's country

Set initialCountry to 'auto' and pass in a function for geoIpLookup to perform a JSONP request to ipinfo.io, which returns the user's country based on their IP address.

Code

<input id="phone" type="tel">
$("#phone").phoneInput({
  initialCountry: "auto",
  geoIpLookup: function(callback) {
    $.get('http://ipinfo.io', function() {}, "jsonp").always(function(resp) {
      var countryCode = (resp && resp.country) ? resp.country : "";
      callback(countryCode);
    });
  },
  utilsScript: "js/utils.js" // just for formatting/placeholders etc
});

Example 3: National Mode

Allow users to enter their national number, and then convert it to international format using the public method getNumber.

Please enter a number below

Code

<p id="output">Please enter a number below</p>
<input id="phone" type="tel">
var input = $("#phone"),
  output = $("#output");

input.phoneInput({
  nationalMode: true,
  utilsScript: "js/utils.js" // just for formatting/placeholders etc
});

// listen to "keyup", but also "change" to update when the user selects a country
input.on("keyup change", function() {
  var intlNumber = input.phoneInput("getNumber");
  if (intlNumber) {
    output.text("International: " + intlNumber);
  } else {
    output.text("Please enter a number below");
  }
});

Example 4: Country sync

Use static getCountryData method to create a separate country dropdown for an address form, and then listen for change events to keep the two dropdowns in sync.

Code

<div class="form-item">
  <label>Telephone number</label>
  <input id="phone" type="tel">
</div>

<div class="form-item">
  <label>Address</label>
  <input type="text" placeholder="House name/number">
  <input type="text" placeholder="City">
  <input type="text" placeholder="State">
  <input type="text" placeholder="Zip code">
  <select id="address-country"></select>
</div>
// get the country data from the plugin
var countryData = $.fn.phoneInput.getCountryData(),
  telInput = $("#phone"),
  addressDropdown = $("#address-country");

// init plugin
telInput.phoneInput({
  utilsScript: "js/utils.js" // just for formatting/placeholders etc
});

// populate the country dropdown
$.each(countryData, function(i, country) {
  addressDropdown.append($("<option></option>").attr("value", country.iso2).text(country.name));
});
// set it's initial value
var initialCountry = telInput.phoneInput("getSelectedCountryData").iso2;
addressDropdown.val(initialCountry);

// listen to the telephone input for changes
telInput.on("countrychange", function(e, countryData) {
  addressDropdown.val(countryData.iso2);
});

// listen to the address dropdown for changes
addressDropdown.change(function() {
  telInput.phoneInput("setCountry", $(this).val());
});

Example 5: European countries

Set onlyCountries option to show just European country codes.

Code

<input id="phone" type="tel">
$("#phone").phoneInput({
  onlyCountries: ["al", "ad", "at", "by", "be", "ba", "bg", "hr", "cz", "dk", 
  "ee", "fo", "fi", "fr", "de", "gi", "gr", "va", "hu", "is", "ie", "it", "lv", 
  "li", "lt", "lu", "mk", "mt", "md", "mc", "me", "nl", "no", "pl", "pt", "ro", 
  "ru", "sm", "rs", "sk", "si", "es", "se", "ch", "ua", "gb"],
  utilsScript: "js/utils.js" // just for formatting/placeholders etc
});