Validate International Phone Number Using jQuery
Hello, web developers! In this article, we'll see how to validate international phone numbers using jQuery. Here, we'll use a JavaScript plugin to enter and validate international telephone numbers. We’ll explore how to handle mobile number validation with country-specific rules. Different countries have varying phone number lengths and formats.
We will use the International Telephone Input plugin, a pure JavaScript plugin designed for handling international phone numbers.
The plugin adds a country dropdown to your input field and sets a placeholder with an example number for the selected country. Additionally, it can automatically select the user’s current country based on an IP lookup during initialization.
Validating and formatting phone numbers is complex because you need to support various types of numbers (mobile, landline, toll-free, premium, etc.) from different countries, each with its own area codes. Moreover, users may enter these numbers in different formats (national/international).
Here’s a simple example to demonstrate how to validate international phone numbers using jQuery and the International Telephone Input plugin.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Validate International Phone Number Using jQuery - Techsolutionstuff</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/css/intlTelInput.css">
<style>
.hide {
display: none;
}
#valid-msg {
color: #00c900;
}
</style>
</head>
<body>
<div class="container">
<h2>Validate International Phone Number Using jQuery - Techsolutionstuff</h2>
<label for="phone">Phone Number:</label>
<input id="phone" type="tel">
<span id="valid-msg" class="hide">✓ Valid</span>
<span id="error-msg" class="hide"></span>
</div>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/intlTelInput.min.js"></script>
<script>
const input = document.querySelector("#phone");
const errorMsg = document.querySelector("#error-msg");
const validMsg = document.querySelector("#valid-msg");
// Error messages
const errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
// Initialize plugin
const iti = window.intlTelInput(input, {
utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.1.1/build/js/utils.js"
});
// Reset function
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);
</script>
</body>
</html>
In this example, we use the International Telephone Input plugin to handle phone number input and validation. When a user enters a phone number and moves away from the input field, the script checks if the number is valid.
You might also like:
- Read Also: 10 Digit Phone Number Validation in jQuery
- Read Also: Laravel 8 Image Upload Validation
- Read Also: Jquery Input Mask Phone Number Validation
- Read Also: Multi Step Form Example In Laravel
