Как проверить форму на введённый номер телефона?

Question

[Nisen]

Как в функцию ShowError добавить проверку с маской по номеру телефона validatePhoneNumber?

Нужно проверить по нажатию на кнопку senden валидно ли поле с телефоном, где должен быть код +49 а затем 10 либо 11 цифр, чтобы можно было указать.

Comments

[Илья Корень]

можно попробовать: htmlbook.ru/html/input/pattern либо можно использовать какой-либо плагин с маской.

[Сергей Соколов]

сейчас там по событию input – по любому чиху – выполняется валидация и пугает честного бюргера сообщениями об ошибках. Это, наверное, отключится?

+49 можно и не заставлять вводить, но и не запрещать – если copy-paste или браузер авто-заполняет. Например, продумать вариант, когда номер печатают по одной цифре – и если ещё не введён +49, то автоматом дописать его в начале поля, и поставить курсор в конец, чтобы дальше вводили цифры.

Есть ли хорошо продуманное и четко описанное задание, как должно взаимодействовать с пользователем это поле?

По нажатию валидировать легко: там это уже реализовано же. Ну, почти, и криво. По событию формы submit – проверять и если есть ошибки, превентить дефолт.

Можно и валидировать налету, по событию "input", ставить кнопке атрибут disabled до тех пор, пока не введён валидный номер.

Answer 1

[Сергей Соколов]

у поля ввода атрибут pattern должен быть: pattern="\+49[0-9]{10,11}"

В валидации в showError() надо проверять свойство patternMismatch:

} else if (phone.validity.patternMismatch) {
  phoneError.textContent = 'phone should be +49 followed by 10 to 11 digits';
}

Comments

[Nisen]

огромное спасибо!