Input validation and input mask for phone field

[Dissfall]

I think it’s necessary to add input validation for the number field, because now I can get a result like this:

But also I suggest to set input mask on the field. It can provide unique way of phone number representation also adds additional check of input that can help to avoid input errors.

[rizomaa]

@Dissfall thanks for testing

[lavana555]

Добавил регулярное выражение для проверки вводимого номера
в файл validation.js
const TelRegexp =/^(?:+|\d)[\d-() ]{4,14}\d$/;

if ((p = data.telephone) != null) {
if (!TelRegexp.test(p)) {
errors.telephone = t("invalidPhone");
}
}
Добавил
"invalidPhone": "Invalid Phone",
в файл translation-en.json
"invalidPhone": "Invalid Phone",
в файл translation-de.json
"invalidPhone": "Недапушчальны Tэлефон",
в файл translation-by.json
вот что на UI

добавление маски на телефон пока еще не разобрался как это работает в процессе

[Dissfall]

Нашёл такой модуль для маски ввода.
Возможно, можно использовать его

[wellemut]

Hi,
you can do it as you want, but a validation might do it very annoying. Most of the phonecalls reconize numbers anywhere in the text and unlike the mail-field we will never automaticall use the phonenumber.

Instead, many networks are using multiple numebers or want to say at what time you need to call which number

[rizomaa]

Нашёл такой модуль для маски ввода.
Возможно, можно использовать его

@lavana555 наогул ту без фанатызма. нам дастаткова правяраць толькі ўвод

1. лічбаў
2. Знакаў: (, ), + , прабела
   Астатняе забараніць. Калі гэта магчыма без заліўкі модуля парай праверак рэгулярнымі выразамі. Калі не тады прымай модуль праз нпм.

[mvit22]

Сделал маску, с помощью react-input-mask
Маска появляется при фокусе на данный input, и пропадает, если маска вообще не заполнена.
Так же добавил pattern, который не даст отправить форму с недовведенным номером.
Маска рассчитана только на белорусские номера в международном стандарте.
Незаполненный вариант

Заполненный вариант

[rizomaa]

@VitalyMikulich
лепей жорства не прывязваць толькі да беларускіх нумароў, хаця іх будзе 95%, трэба улічыць, што могуць быць нумары іншыя.
Проста дазволь толькі тое, што абазначана #230 (comment)
Задачы складаней, яшчэ будуць.

[mvit22]

Сделать как в комментарии без использования библиотек будет проблематично. Нужно рассматривать много различных комбинаций клавиш (к примеру заблокировав ввод клавиши v блокируется также функция вставить ctrl+v).
Правда, есть один вариант без использования библиотек, но работает он не эстетично.
Поэтому я бы, все таки, попробовал применить эту библиотеку.

[mvit22]

Вот так будет с помощью react-phone-number-input.
Белорусский номер

Российский номер

Украинский номер

Для каждого номера автоматически выбирается маска по коду страны и области в процессе ввода.

[rizomaa]

1. Усё ж трымаемся простага рашэння.
2. Па блакіроўцы клавіш,можна зрабіць выклчэнні на іх таксама па коду.
3. Што значыць працуе "не эстэтычна". Можаш паказаць?

Вось што даў беглы пошук:

• https://stackoverflow.com/questions/13607278/html5-restricting-input-characters
• https://stackoverflow.com/questions/16434174/only-allow-certain-characters-to-be-entered-in-html-textinput

[rizomaa]

@VitalyMikulich зы... толькі убачыў твой апошні камент, у нас людзі яшчэ звыклі наіраць намуры праз 80... як тут быць?

[mvit22]

Минск

Брест

[mvit22]

Насчет метода, который работает не эстетично. На четверть секунды появляется к примеру буква и потом исчезает, но это все равно заметно. Грубо говоря при событии mouseup символы не соответствующие регулярному выражения заменяет пустой строкой.

[rizomaa]

@VitalyMikulich давай паспрабуем "неэстэтычны варыянт", бо насамрэч тут важна прстата выкарыстання, розныя лібы для мабільных карыстальнікаў могуць быць вельмі нязручны.

[mvit22]

Хорошо. Мне делать PR?

[rizomaa]

@VitalyMikulich абавязкова)

[mvit22]

#367 PR