Нужно сделать маску ввода номера телефона на сайт.
Есть пример кода на github и видео инструкция (но маска для русских номеров).
Видео с 19:26 минуты, https://www.youtube.com/watch?v=Lxj_v5z0xRE&t=1168s
Github, код с примером: https://github.com/alexey-goloburdin/phoneinput
Мне нужно адаптировать под украинские номера.
Визуальное отображение (по умолчанию цифры в поле не выводим, только отображаем их фоном) до ввода:
+38 (_ _ _) _ _ _ - _ _ - _ _
(с пробелами между подчеркиваниями)
Визуальное отображение после ввода:
+38 (093) 444-44-44
(нету пробела между цифрами, пример https://web.monobank.ua/)
Условия:
1) Если вводится первый символ "0" тогда подставляем в начало "+38"
2) Если вводится первый символ "8" тогда подставляем в начало "+3"
3) Если вводится первый символ "3" тогда подставляем в начало "+"
4) Если вводится первый символ "+" тогда ничего не подставляем в начало.
Ошибки при отправке формы проверять на количество цифр:
1) Отображать ошибку если цифр меньше чем 12.
2) Не должно быть ограничений в количестве вводимых цифр.
Отображать ошибку если цифр больше 12.
Внешний вид ошибки:
1) красная обводка поля с номером телефона
2) иконка справа (у меня есть файл png)
3) текстовая подпись красного цвета
Проверяем работоспособность ручным вводом номера с телефона.
Прикрепить сайт маску к форме на этом одностраничном сайте https://top.grimax-shop.com.ua/sanya/1/
Файл сайта скину. Можете на моем или своем хостинге сделать.