Comment sélectionner automatiquement un pays à l'aide de la recherche IP dans jQuery

Dans cet article, nous verrons comment sélectionner automatiquement un pays à l'aide de la recherche IP dans jquery. Ici, nous allons apprendre à sélectionner automatiquement le pays de l'utilisateur et à valider le numéro de téléphone. L'entrée téléphonique internationale prend en charge la définition du pays initial sélectionné sur le pays actuel de l'utilisateur, à l'aide d'un service de recherche IP.

Voyons donc intltelinput définir dynamiquement le code de pays, le code de pays avec la liste déroulante des drapeaux jquery, la validation jquery de l'entrée téléphonique internationale, la sélection automatique du pays de l'utilisateur et la validation du numéro de téléphone, le javascript de validation du numéro de téléphone international.

Ici, nous utilisons le plugin International Telephone Input pour sélectionner automatiquement le pays de l'utilisateur avec validation. International Telephone Input est un plugin, écrit en pur JavaScript, pour gérer les numéros de téléphone internationaux.

Vous devez activer deux options d'initialisation. Tout d'abord, vous devez définir l' initialCountry option sur "auto". Cela indique au plugin d'utiliser le service de recherche IP pour déterminer le pays de l'utilisateur. Deuxièmement, vous devez définir l' geoIpLookup option sur une fonction qui effectuera la demande de recherche IP et renverra le code du pays.

Exemple:

<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 :

Il est important de valider toute entrée utilisateur avant de l'enregistrer dans votre backend. Avec l'entrée téléphonique internationale, vous pouvez utiliser la isValidNumber méthode qui renvoie vrai ou faux. S'il renvoie false et que vous souhaitez plus de détails, vous pouvez alors utiliser la getValidationError méthode pour obtenir plus d'informations.

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);