I'm currently using https://github.com/jackocnr/intl-tel-input js library to validate my phone inputs. But unfortunately it always returns the Invalid number error even if the number is active and valid here in our country. Please see my code below for reference.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="assets/int-tel-input/css/intlTelInput.min.css">
<style>
.hide { display: none; }
</style>
</head>
<body>
<div class="container">
<input type="text" id="phone">
<span id="valid-msg" class="hide">✓ Valid</span>
<span id="error-msg" class="hide"></span>
</div>
<script src="assets/jquery.min.js"></script>
<script src="assets/int-tel-input/js/intlTelInput.min.js"></script>
<script src="assets/controller.js"></script>
</body>
</html>
controller.js
$(document).ready(function() {
var input = document.querySelector("#phone"),
errorMsg = document.querySelector("#error-msg"),
validMsg = document.querySelector("#valid-msg");
// here, the index maps to the error code returned from getValidationError - see readme
var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
// initialise plugin
var iti = window.intlTelInput(input, {
initialCountry: "PH",
onlyCountries: ["ph"],
separateDialCode: true,
utilsScript: "assets/int-tel-input/js/utils.js"
});
var reset = function() {
input.classList.remove("error");
errorMsg.innerHTML = "";
errorMsg.classList.add("hide");
validMsg.classList.add("hide");
};
// on blur: validate
input.addEventListener('blur', function() {
reset();
if (input.value.trim()) {
if (iti.isValidNumber()) {
validMsg.classList.remove("hide");
} else {
input.classList.add("error");
var errorCode = iti.getValidationError();
errorMsg.innerHTML = errorMap[errorCode];
console.log(errorCode)
errorMsg.classList.remove("hide");
}
}
});
// on keyup / change flag: reset
input.addEventListener('change', reset);
input.addEventListener('keyup', reset);
})
Reference: https://intl-tel-input.com/node_modules/intl-tel-input/examples/gen/is-valid-number.html
Make sure you are importing the utils script properly: