Сводка ошибок формы: найти проблемные поля
Для длинной формы сводка ошибок помогает быстро увидеть, что нужно исправить, и перейти к соответствующему полю.
Назначение
Для длинной формы сводка ошибок помогает быстро увидеть, что нужно исправить, и перейти к соответствующему полю.
Как это работает
Каждая строка описывает конкретную проблему и ведёт к существующему id. Поле также получает собственное пояснение, связанное через aria-describedby, и состояние aria-invalid при подтверждённой ошибке.
Пример
<section aria-labelledby="errors-title"><h2 id="errors-title">Исправьте одно поле</h2><a href="#reply-email">Укажите почту для ответа</a></section><label for="reply-email">Почта</label><input id="reply-email" type="email" aria-invalid="true" aria-describedby="email-error"><p id="email-error">Поле пустое. Укажите адрес, на который можно ответить.</p>Что должно получиться
Показан статический образец уже обнаруженной ошибки. Сама разметка не проверяет изменение значения и не снимает ошибку автоматически: это часть логики приложения.
Граница применения и частая ошибка
Не объявляйте все поля ошибочными до попытки заполнения без необходимости. И не ограничивайтесь красной рамкой: человеку нужно понять причину и способ исправления.
Самостоятельная проверка
Пройдите ссылку из сводки к полю клавиатурой. Затем исправьте значение в своём приложении и уберите устаревшие сообщение и aria-invalid согласованно.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.