Валидация формы проверяет, что пользователь ввёл данные в нужном формате, и помогает исправить ошибку до отправки. Надёжная форма использует ограничения в браузере и повторную проверку на сервере, показывает понятное сообщение рядом с проблемным полем и сохраняет уже введённые данные. Такой подход подходит для регистрации, заказа и формы обратной связи для сайта.
Что проверить перед публикацией формы
- Для каждого поля определены допустимые значения и обязательность заполнения.
- Сообщения объясняют, как исправить ошибку, а не только сообщают о ней.
- Данные проверяются и в браузере, и на сервере.
- После ошибки пользователь видит введённые значения и может продолжить.
- Форму можно пройти с клавиатуры и на небольшом экране.
Составьте правила проверки для каждого поля
Сначала запишите, какие данные нужны и для чего они используются. Для имени можно разрешить буквы, пробелы и дефис; для адреса электронной почты - проверить формат; для телефона - заранее определить, допустимы ли пробелы, скобки и знак плюса. Правила должны соответствовать реальным сценариям, а не излишне ограничивать ввод.
Этот этап подходит для любой разработки формы для сайта, особенно если форма собирает контактные данные или запускает важное действие. Не добавляйте проверку "на всякий случай": если поле не нужно для обработки запроса, рассмотрите возможность убрать его. Чем больше обязательных полей, тем выше вероятность, что пользователь остановится, не завершив отправку.
Используйте HTML-ограничения как первый уровень валидации
Для начала понадобятся доступ к разметке формы и возможность проверить её в браузере. HTML-атрибуты помогают сообщить браузеру о типе и обязательности поля: например, используйте type="email" для почты, required для обязательного значения и подходящие minlength или maxlength для длины текста.
Эти ограничения упрощают ввод и позволяют показать первичную ошибку без отправки формы. Но они не заменяют серверную проверку: браузер можно обойти, а клиентский код - отключить. При создании формы на сайте также проверьте, что метка поля связана с самим полем, а подсказки и сообщения доступны пользователю.
Дублируйте проверку на сервере и обрабатывайте её результат
Перед настройкой формы обратной связи на сайте подготовьте короткий чек-лист:
- состав полей и обязательность каждого из них;
- правила формата и длины для принимаемых значений;
- место на сервере, где выполняется проверка;
- способ вернуть ошибки и повторно показать значения;
- тестовые данные для корректного ввода и типичных ошибок.
Затем действуйте по шагам.
- Определите единый набор правил. Запишите требования к каждому полю так, чтобы клиентская и серверная проверки не противоречили друг другу. Например, если адрес электронной почты обязателен, пустое значение должно считаться ошибкой и в браузере, и на сервере.
- Проверьте ввод на сервере. После получения данных повторно проверьте обязательность, формат и ограничения длины. Не считайте значение безопасным только потому, что оно прошло браузерную проверку.
- Подготовьте ответ с ошибками. Если поле не прошло проверку, укажите, какое именно и что нужно исправить. Не включайте в сообщение конфиденциальные данные или внутренние технические подробности.
- Верните пользователя к форме. Покажите ошибки и сохраните значения полей, которые допустимо повторно отобразить. Для полей с чувствительными данными задайте отдельные правила: не подставляйте их обратно автоматически.
- Повторите проверку после успешного исправления. Убедитесь, что форма принимает корректный ввод и сервер выполняет ожидаемое действие. Проверьте также повторную отправку и ситуацию, когда сервер временно недоступен.
Пишите сообщения, которые объясняют, как исправить ошибку
Проверьте тексты сообщений по этому списку:
- Названо поле, в котором обнаружена ошибка.
- Указано конкретное действие: например, "Введите адрес в формате name@example.com".
- Для обязательного поля сказано, что его нужно заполнить.
- Для слишком длинного значения объяснено, что нужно сократить текст.
- Формулировки понятны без знания технических терминов.
- Сообщение не обвиняет пользователя и не раскрывает внутренние детали сайта.
- Текст ошибки доступен при навигации с клавиатуры и не различается только по цвету.
Избегайте сообщений вроде "Ошибка 400" или "Неверные данные": они не подсказывают, что делать дальше. Для ошибки формата и пустого обязательного поля используйте разные объяснения.
Показывайте ошибки рядом с полем и сохраняйте введённые данные
При настройке формы обратной связи на сайте важно показать, где возникла проблема, и не заставлять человека заполнять всё заново. Проверьте, не допущены ли такие ошибки:
- Общее сообщение появляется вверху страницы, но не указывает на проблемное поле.
- Поле отмечено только цветом, без текста или другого понятного обозначения.
- Сообщение появляется далеко от поля и теряется при прокрутке.
- После неудачной отправки очищаются все введённые значения.
- Ошибка исчезает без пояснения, хотя значение всё ещё не исправлено.
- Курсор не переводится к первому проблемному полю и не обозначается ошибка в доступном виде.
- Повторное нажатие отправляет форму несколько раз, пока первый запрос ещё обрабатывается.
Если ошибок несколько, покажите их рядом с соответствующими полями и при необходимости добавьте краткое общее сообщение вверху формы. Убедитесь, что после исправления одного поля остальные сообщения остаются понятными.
Проверьте форму с клавиатуры, скринридером и на мобильном экране
Для валидации формы на сайте одной проверки в обычном браузере недостаточно. Используйте подходящий набор проверок:
- Клавиатура: пройдите поля по порядку клавишей Tab, заполните форму и исправьте ошибки без мыши.
- Скринридер: проверьте, читаются ли названия полей, обязательность и сообщения об ошибках.
- Мобильный экран: проверьте, помещаются ли подсказки и ошибки, не перекрывают ли они поля и удобно ли выбирать тип клавиатуры.
- Разные сценарии ввода: протестируйте пустые поля, неверный формат, слишком длинное значение, корректные данные и ответ сервера с ошибкой.
Если невозможно проверить экранный диктор в используемой среде, попросите специалиста по доступности провести такую проверку отдельно. Перед публикацией повторите тестирование после изменений в разметке или обработке ошибок.
Практические нюансы валидации полей
Достаточно ли проверить форму средствами браузера?
Нет. Браузерная проверка помогает пользователю исправить простой ввод, но данные необходимо проверять и на сервере.
Что делать, если поле обязательно только при определённых условиях?
Покажите условие до отправки и согласованно применяйте его в браузере и на сервере. Если условие изменилось, обновите отображение ошибки и состояние поля.
Нужно ли очищать форму после ошибки?
Обычно нет: сохраните значения, которые можно безопасно показать повторно. Для чувствительных данных определите отдельный порядок обработки и не подставляйте их автоматически.
Как сообщать об ошибке формата?
Назовите ожидаемый формат или приведите короткий пример. Сообщение должно давать пользователю понятный способ исправить ввод.
Что показать, если сервер временно не отвечает?
Сообщите, что отправку не удалось завершить, и предложите повторить её позднее. Если запрос мог быть принят, не создавайте впечатление, что данные точно не отправлены.
Когда проверять поле - при вводе или после отправки?
Выбор зависит от типа поля и сценария. Проверка после ввода может помочь исправить очевидную ошибку, но не должна мешать вводить значение частями или отвлекать преждевременным предупреждением.