Розрахунок йде на перше введеня номеру, а не на багаторазове редагування. Для коректного тесту, рекомендується перезавантажувати сторінку після кожного введення.
Сторінка - http://sa.valid.code.rcktprft.ru/
Для імітації різних країн - http://sa.valid.code.rcktprft.ru/?&country_code=RU
Форматує і визначає номери країн по:
- коду країни
+380,380,39(Italy),7,+39,+7... - коду оператора країни
050,097,812(RU код оператора),363(IT код оператора),912(RU код оператора)...
Визначає номери лише для країн з випадаючого списку, які в свою чергу підтягуються з мов на сторінці на сервері (гео). Якщо не задана країна, то форматування для цієї країни не відслідковується, але завжди спрацює міжнародний формат хоча і буде сірий прапор.
Приорітет йде на:
- Код країни, де знаходиться користувач сайту.
- Код введеної країни в input (наприклад, українець вводить український номер в Росії
380 50 ...) - Код оператора (
363- італійський оператор без коду країни Італії).
Логіка роботи при вводі "конфліктних" номерів. Ситуація, коли при вводі 777 є різні варіанти реалізації (7 - код Росії, 77 - грузинський оператор, 777 - казахстанський оператор):
7... - Має вибивати Росію для користувача з Росії. Якщо користувач продовжить вводити номер 777, то 77 та 777 номери ніколи не спрацюють і прапор не змінться, бо пріоритет за країною, звідки робиться замовлення.
77... - Має вибивати Грузію. Пропускає вибір прапору Росії, якщо користувач з Грузії і ввів 7.
777... - Має вибивати Казахстан. Пропускає вибір прапору Росії + Грузії, якщо користувач з Казахстану ввів 7 або 77.
Тобто пріоритет за рідною країною. Наприклад, якщо вводити номер "359", то відразу спрацьовує код країни Білорусі і прапор змінюється. Але не зміниться при 7 (код Росії), якщо користувач з України, бо є український оператор 073 -> 73.
Якщо ввести в інпут код країни поточної (користувач з України вводить український номер 380 ...), тоді код країни 380 прибирається для зручності. Працює для всіх країн.
Зроблене розмежування +7 для Росії та +7 для Казахстана. Для кожного виведеться свій прапор в своїй країні.
До сторінки підключена валідація номерів. Перевіряв для відомих країн - Україна, Росія, Казахстан, Італія - все працює коректно та визначені оператори. Наприклад, телефон +380 12 555 12 34 - не пропускається, бо немає в Україні такого оператора (виводиться звичайне модальне вікно "Введіть коректний номер"). Для Італії передбачені два варіанта довжини номеру 10 і 11 цифр (перевірив, запити спрацювали коректно).
Якщо вибрати країну з випадаючого списку, то по Оператору і Способу "380", форматування відключається - країну не визначає (буде країна, яку вибрали). Визначає лише через +380 або повторному виборі країни з випадаючого списку. Це зроблено для того, щоб користувачеві не змінювався більше прапор після вибору.
Міжнародні номери +380 ..., +7 ..., +39 ... (IT) спрацьовують завжди.
Для коректного тесту, рекомендується перезавантажувати сторінку після кожного введення.
Всі номери проходять зовнішню валідацію. При успішній перевірці, телефон відправляється у вигляді +38050... (UA), +39363... (IT), +7912... (RU) (без пропусків і зі знаком +).
Може некоректно спрацьовувати в старих версіях браузерів або в старих мобільних браузерах.
Проблемка: якщо вводити телефон з + дуже швидко (кілька символів в секунду), то скрипт не встигає спрацювати і змінити прапор.
ПРАЦЮЄ ЛИШЕ НА СЕРВЕРІ
- Підключаємо скрипти, стилі та додаємо 2 картинки (змінюємо шлях в кінці файлу .css - img/images).
- До input'ів з маскою додаємо клас "everad-mask".
- Задаємо стилі під дизайн сторінки.
На сторінці завжди має бути <select>, але його можна сховати (display: none).
<link href="css/intlTelInput.css" rel="stylesheet" type="text/css"> <script src="js/jquery.min.js"></script>
<script src="js/jquery.caret.min.js"></script>
<script src="js/intlTelInput.min.js"></script>
<!-- <script src="js/utils.js"></script> - автоматично підключається з everadmask.js. Якщо видає помилку, тоді підключаємо тут -->
<script src="js/everadmask.js"></script>