Ошибки формы: объяснить и помочь исправить
Как связывать сообщение с полем, сохранять введённое и не выдавать успех до завершения обработки.
Зачем это нужно
Ошибка формы — часть нормального взаимодействия. Человек может опечататься, пропустить обязательное поле или потерять связь. Хороший интерфейс объясняет конкретную проблему и помогает продолжить, а не просто показывает красную рамку.
Сообщайте причину рядом
Напишите, какое значение ожидается и что нужно изменить. Свяжите сообщение с полем через aria-describedby. При фактической ошибке можно использовать aria-invalid, но не отмечайте все ещё не заполненные поля ошибочными при первом открытии.
Сохраняйте безопасные значения
Не заставляйте заново вводить весь текст из-за одной ошибки. Отображайте сохранённые строки безопасно, без исполнения HTML. Для паролей и других чувствительных полей поведение требует отдельного решения.
Разделяйте этапы отправки
Покажите ожидание, затем реальный результат сервера. Сетевой отказ отличается от ошибки значения. Если действие можно повторить, объясните это и подумайте о защите от случайной двойной отправки.
Важное ограничение
Контрольная проверка
- Причина ошибки конкретна.
- Сообщение связано с нужным полем.
- Остальной текст не пропадает.
- Успех показывается только после подтверждения операции.
Продолжить изучение: пример формы, FormData.