International Telephone Input

International Telephone Input является плагином jquery для ввода и проверки международных телефонных номеров. Он добавляет выпадающее меню в котором перечислены все страны с их международными телефонными кодами и флагами.

Возможности International Telephone Input

Автоматически форматирует введенный телефонный номер
Автоматически устанавливает в атрибут placeholder тега input пример телефонного номера для выбранной страны
Перемещение по странам в выпадающем списке помощью кнопок вверх/вниз или с помощью клавиш с алфавитом
Выбор новой страны из списка приведет к обновлению международного телефонного кода в input
Ввод другого телефонного кода автоматически обновляет отображаемый флаг
Выпадающее меню позиционируется в зависимости от наличия свободного места сверху\снизу
Множество собственных настроек и открытых методов для взаимодействия

Подключение:

Подключите intlTelInput.css между тегами head вашей страницы.

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

Создайте поле для ввода телефона.

<input type="tel" id="demo" placeholder="">

Подключите библиотеку jQuery и плагин jQuery International Telephone Input в конце страницы перед закрывающим тегом body.

<script src="jquery.min.js"></script>
<script src="build/js/intlTelInput.js"></script>

Инициализируйте плагин следующим образом:

$("#demo").intlTelInput();

Дефолтные настройки:

// набор цифр, после валидации число будет добавлено к номеру
allowExtensions: false,

// автоматически форматировать телефон в соответствии с выбранной страной
autoFormat: true,

// показывать или нет пример записи телефонного номера для выбранной страны
autoPlaceholder: true,

// если в окне набора номера вписан код страны, то удалить его и переписать заново
autoHideDialCode: true,

// страна по умолчанию
defaultCountry: "",

// Маркер для ipinfo
// рекомендуется для https, или поддержки более 1000 просмотров страницы в день
ipinfoToken: "",

// не вставляйть в поле ввода международные телефонные коды
nationalMode: true,

// тип номера для плейсхолдера
numberType: "MOBILE",

// показывать только указанные в массиве страны
onlyCountries: [],

// страны в верхней части списка.
// по умолчанию это США и Великобритания
preferredCountries: [ "us", "gb" ],

// указать путь к скрипту libphonenumber для валидации/форматирования
utilsScript: ""

Доступные методы:

// отключение плагина
$("#demo").intlTelInput("destroy");

// Получить код страны
var extension = $("#demo").intlTelInput("getExtension");

// Получить текущий номер в данном формате
var intlNumber = $("#demo").intlTelInput("getNumber");

// Получить тип (фиксированный/мобильный/бесплатный и т.д.) текущего номера. 
var numberType = $("#demo").intlTelInput("getNumberType");

// Получить данные по стране для выбранного флага.
var countryData = $("#demo").intlTelInput("getSelectedCountryData");

// Получить более подробную информацию об ошибке валидации. 
var error = $("#demo").intlTelInput("get<a href="http://www.jqueryscript.net/tags.php?/Validation/">Validation</a>Error");

// Проверка текущего номера на валидность
var isValid = $("#demo").intlTelInput("isValidNumber");

// Загрузить скрипт utils.js (находится в каталоге lib) для всключения форматирования\валидации и др.
$("#demo").intlTelInput("loadUtils", "lib/libphonenumber/build/utils.js");

// Изменить выбранную страну
$("#demo").intlTelInput("selectCountry", "gb");

// Вставить номер и, соответственно, обновить выбранный флаг.
$("#demo").intlTelInput("setNumber", "+44 7733 123 456");

Примеры с International Telephone Input

Валидация

Воспользуемся методом isValidNumber, а также библиотекой libphonenumber от Google чтобы проверить правильность введенного номера телефона. Наш HTML-код будет таким:

<input id="phone" type="tel">
<span id="valid-msg" class="hide">✓ Валидный</span>
<span id="error-msg" class="hide">Не валидный</span>

Javascript-код:

var telInput = $("#phone"),
  errorMsg = $("#error-msg"),
  validMsg = $("#valid-msg");

// инициализация плагина
telInput.intlTelInput({
utilsScript: "js/utils.js"
});

// валидация при потере фокуса
telInput.blur(function() {
  if ($.trim(telInput.val())) {
    if (telInput.intlTelInput("isValidNumber")) {
      validMsg.removeClass("hide");
    } else {
      telInput.addClass("error");
      errorMsg.removeClass("hide");
      validMsg.addClass("hide");
    }
  }
});

// сброс при нажатии на клавишу
telInput.keydown(function() {
  telInput.removeClass("error");
  errorMsg.addClass("hide");
  validMsg.addClass("hide");
});

Результат:

Показать страну пользователя:

С помощью IP определим страну пользователя и выведем ее в строке ввода телефона. Для этого установите defaultCountry значение 'auto' и запустите функиию для geoIpLookup, чтобы совершить запрос JSONP к ipinfo.io, который покажет страну нахождения пользователя, основываясь на его IP.

HTML:

<input id="phone-ip" type="tel">

Javascript-код:

$("#phone-ip").intlTelInput({
  defaultCountry: "auto",
  geoIpLookup: function(callback) {
    $.get('http://ipinfo.io', function() {}, "jsonp").always(function(resp) {
      var countryCode = (resp && resp.country) ? resp.country : "";
      callback(countryCode);
    });
  },
  utilsScript: "utils.js" //для форматирования/плейсхолдера и т.д.
});

Результат:

Форматирование номера

Разрешим пользователям вводить их номер телефона в принятом в их стране формате, а затем преобразуем его в международный формат, используя метод getCleanNumber. HTML-разметка для этого примера:

<p id="output-nn">Пожалуйста, введите номер ниже</p>
<input id="phone-nn" type="tel">

Javascript-код:

var input = $("#phone"),
  output = $("#output");

input.intlTelInput({
  nationalMode: true,
  utilsScript: "utils.js" //для форматирования/плейсхолдера и т.д.
});

// слушаем "keyup" и "change", чтобы обновить, 
// когда пользователь выбирает страну
input.on("keyup change", function() {
  var intlNumber = input.intlTelInput("getNumber");
  if (intlNumber) {
    output.text("Международный: " + intlNumber);
  } else {
    output.text("Пожалуйста, введите номер ниже");
  }
});

Результат:

Синхронизация стран

Используем статический метод getCountryData чтобы создать отдельный выпадающий список со странами, а затем прослушивая события, синхронизировать страну в поле ввода телефона и в выпадающем списке. HTML-код для данного примера:

<div class="form-item">
  <label>Телефонный номер</label>
  <input id="phone" type="tel">
</div>

<div class="form-item">
  <label>Адрес</label>
  <input type="text" placeholder="Имя дома/номер">
  <input type="text" placeholder="Город">
  <input type="text" placeholder="Штат">
  <input type="text" placeholder="Zip код">
  <select id="address-country"></select>
</div>

Javascript-код:

// получить данные по странам от плагина
var countryData = $.fn.intlTelInput.getCountryData(),
  telInput = $("#phone-country"),
  addressDropdown = $("#address-country");

// инициализация плагина
telInput.intlTelInput({
  utilsScript: "utils.js" //для форматирования/плейсхолдера и т.д.
});

// заполнить выпадающий список странами
$.each(countryData, function(i, country) {
  addressDropdown.append($("").attr("value", country.iso2).text(country.name));
});

// отслеживаем изменения телефонного кода
telInput.change(function() {
  var countryCode = telInput.intlTelInput("getSelectedCountryData").iso2;
  addressDropdown.val(countryCode);
});

// запускаем триггер "change" для синхронизации
telInput.change();

// отслеживаем изменение страны в выпадающем списке
addressDropdown.change(function() {
  var countryCode = $(this).val();
  telInput.intlTelInput("selectCountry", countryCode);
});

Вывести в списке только европейские страны

Выведем только европейские коды стран с помощью опции onlyCountries.

<input id="phone-europe" type="tel">

Javascript-код:

$("#phone-europe").intlTelInput({
  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: "utils.js" //для форматирования/плейсхолдера и т.д.
});

Изменить данные о стране

Воспользуемся статическим методом getCountryData чтобы показывать рядом с флагами только локализованное название страны. HTML код:

<input id="phone-country-data" type="tel">

Javascript-код:

var countryData = $.fn.intlTelInput.getCountryData();
$.each(countryData, function(i, country) {
  country.name = country.name.replace(/.+\((.+)\)/,"$1");
});
$("#phone-country-data").intlTelInput({
  utilsScript: "utils.js" //для форматирования/плейсхолдера и т.д.
});

Отправка номера в международной записи, при использовании номера в принятом в стране пользователя формате

Если вы отправляете форму, используя Ajax, просто используйте getNumber, чтобы получить число перед его отправкой. Если вы используете стандартный метод POST формы, вы должны использовать отдельный скрытый input, который вы обновляете при отправке полного международного номера. Попробуйте отправить форму с валидным номером телефона, а затем проверьте параметр "phone-full" в в строке URL.

<form>
  <input id="phone-with-hidden" type="tel" name="phone">
  <input id="intlTelInputHidden" type="hidden" name="phone-full">
  <button type="submit">Отправить</button>
</form>

Javascript-код:

$("#phone-with-hidden").intlTelInput({
  utilsScript: "utils.js" //для форматирования/плейсхолдера и т.д.
});

$("form").submit(function() {
  $("#intlTelInputHidden").val($("#phone-with-hidden").intlTelInput("getNumber"));
});