Как автоматически выбрать страну с помощью поиска по IP-адресу в jQuery

В этой статье мы увидим, как автоматически выбирать страну с помощью поиска по IP-адресу в jquery. Здесь мы узнаем об автовыборе страны пользователя и проверке номера телефона. Международный телефонный ввод поддерживает установку исходной выбранной страны на текущую страну пользователя с помощью службы поиска IP.

Итак, давайте посмотрим, как intltelinput динамически устанавливает код страны, код страны с раскрывающимся списком флагов jquery, валидацию международного телефонного ввода jquery, автовыбор страны пользователя и проверку номера телефона, javascript проверки международного номера телефона.

Здесь мы используем плагин International Telephone Input для автоматического выбора страны пользователя с проверкой. Международный телефонный ввод — это плагин, написанный на чистом JavaScript, для обработки международных телефонных номеров.

Вы должны включить две опции инициализации. Во-первых, вы должны установить initialCountry опцию "auto". Это говорит подключаемому модулю использовать службу поиска IP для определения страны пользователя. Во-вторых, вы должны установить geoIpLookup для параметра функцию, которая будет выполнять запрос на поиск IP и возвращать код страны.

Пример:

<html lang="en">
<head>
	<title>How To Auto Select Country Using IP Lookup In jQuery - Techsolutionstuff</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/css/intlTelInput.css">
</head>
<body>
	<div class="col-md-6 offset-md-2">
		<div class="container mt-5">
			<div class="card">
				<div class="card-header">
					<strong>How To Auto Select Country Using IP Lookup In jQuery - Techsolutionstuff</strong>
				</div>
				<div class="card-body">
					<h6 class="card-title">Phone Number:</h6>
					<input id="phone" type="tel">
					<span id="valid-msg" class="hide">✓ Valid</span>
					<span id="error-msg" class="hide"></span>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/intlTelInput.min.js"></script>

CSS:

.hide {
  display: none;
}
#valid-msg {
  color: #00c900;
}

jQuery:

Важно проверять любой пользовательский ввод, прежде чем сохранять его на серверной части. С международным телефонным вводом вы можете использовать isValidNumber метод, который возвращает true или false. Если он возвращает false и вам нужны дополнительные сведения, вы можете использовать этот getValidationError метод для получения дополнительной информации.

const input = document.querySelector("#phone");
const errorMsg = document.querySelector("#error-msg");
const validMsg = document.querySelector("#valid-msg");

// here, the index maps to the error code returned from getValidationError - see readme
const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];

// initialise plugin
const iti = window.intlTelInput(input, {
  initialCountry: "auto",
  geoIpLookup: callback => {
    fetch("https://ipapi.co/json")
      .then(res => res.json())
      .then(data => callback(data.country_code))
      .catch(() => callback("us"));
  },
  utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js"
});

const reset = () => {
  input.classList.remove("error");
  errorMsg.innerHTML = "";
  errorMsg.classList.add("hide");
  validMsg.classList.add("hide");
};

// on blur: validate
input.addEventListener('blur', () => {
  reset();
  if (input.value.trim()) {
    if (iti.isValidNumber()) {
      validMsg.classList.remove("hide");
    } else {
      input.classList.add("error");
      const errorCode = iti.getValidationError();
      errorMsg.innerHTML = errorMap[errorCode];
      errorMsg.classList.remove("hide");
    }
  }
});

// on keyup / change flag: reset
input.addEventListener('change', reset);
input.addEventListener('keyup', reset);