| 1 |
www |
1 |
var input = document.querySelector("#phone"),
|
|
|
2 |
errorMsg = document.querySelector("#error-msg"),
|
|
|
3 |
validMsg = document.querySelector("#valid-msg");
|
|
|
4 |
|
|
|
5 |
// here, the index maps to the error code returned from getValidationError - see readme
|
|
|
6 |
var errorMap = ["Invalid number", "Invalid country code", "Too short", "Too long", "Invalid number"];
|
|
|
7 |
|
|
|
8 |
// initialise plugin
|
|
|
9 |
var iti = window.intlTelInput(input, {
|
|
|
10 |
utilsScript: "../../build/js/utils.js?1603274336113"
|
|
|
11 |
});
|
|
|
12 |
|
|
|
13 |
var reset = function() {
|
|
|
14 |
input.classList.remove("error");
|
|
|
15 |
errorMsg.innerHTML = "";
|
|
|
16 |
errorMsg.classList.add("hide");
|
|
|
17 |
validMsg.classList.add("hide");
|
|
|
18 |
};
|
|
|
19 |
|
|
|
20 |
// on blur: validate
|
|
|
21 |
input.addEventListener('blur', function() {
|
|
|
22 |
reset();
|
|
|
23 |
if (input.value.trim()) {
|
|
|
24 |
if (iti.isValidNumber()) {
|
|
|
25 |
validMsg.classList.remove("hide");
|
|
|
26 |
} else {
|
|
|
27 |
input.classList.add("error");
|
|
|
28 |
var errorCode = iti.getValidationError();
|
|
|
29 |
errorMsg.innerHTML = errorMap[errorCode];
|
|
|
30 |
errorMsg.classList.remove("hide");
|
|
|
31 |
}
|
|
|
32 |
}
|
|
|
33 |
});
|
|
|
34 |
|
|
|
35 |
// on keyup / change flag: reset
|
|
|
36 |
input.addEventListener('change', reset);
|
|
|
37 |
input.addEventListener('keyup', reset);
|