Проверка форм: пустые поля, пробелы и понятные ошибки

Пользователь заполнил длинную форму, ошибся в одном поле и потерял весь введённый текст. Проверка, возможно, сработала, но пользоваться результатом неудобно. Хорошая форма помогает человеку исправиться и сохраняет именно допустимые данные.

В этой статье разберём обычную форму обращения. Достаточно браузера и учебного аккаунта.

Сначала выпишите правила

Какие поля обязательны? Какие форматы принимаются? Сколько символов разрешено? Что делать с пробелами? Когда появляется ошибка: при вводе, уходе из поля или отправке?

Не придумывайте ограничения сами. Например, дефис и пробел могут быть частью имени, а телефон не всегда состоит только из цифр без знака «+». Для пароля удаление крайних пробелов может быть совсем не тем, что нужно продукту.

Валидация означает проверку значения по заданным правилам. Обязательное поле и проверка формата решают разные задачи: наличие текста ещё не означает, что это подходящий email.

Начните с одного правильного заполнения

Введите допустимые данные, отправьте форму и найдите созданное обращение. Убедитесь, что значения сохранились верно, а сообщение об успехе относится к настоящему результату.

Теперь меняйте по одному условию. Когда одновременно неверны пять полей, трудно понять, какое правило не сработало.