Отображение ошибок формы с новыми типами ввода HTML5
В настоящее время новые типы ввода HTML5,
<input type="number"...>
<input type="email"...>
<input type="url"...>
просто сосредоточьтесь на любых оскорбительных текстовых полях с несоответствующим вводом пользователя при отправке формы
Проблема: фокусировка в порядке. Однако это очень тонкий способ сообщить пользователю, почему форма не отправляется.
Что из этого является лучшим решением, чтобы пользователь знал, что не так:
- Добавьте CSS в текстовое поле с фокусом, добавив цвет фона. Это все еще немного неясно, и пользователь может не сразу понять, почему фокусируется конкретное текстовое поле.
- Проверка Javascript (плагин проверки JQuery) для отображения сообщений об ошибках. В этом случае я мог бы также использовать обычные типы ввода и делать все здесь.
Предложения приветствуются!
2 ответа
Согласно старой доброй эвристике юзабилити:
Предотвращение ошибок: даже лучше, чем хорошие сообщения об ошибках, это тщательный дизайн, который предотвращает возникновение проблемы в первую очередь. Либо устраните подверженные ошибкам условия, либо проверьте их и предоставьте пользователям возможность подтверждения, прежде чем они совершат действие.
Помогите пользователям распознавать, диагностировать и устранять ошибки: сообщения об ошибках должны быть написаны простым языком (без кодов), точно указывать на проблему и конструктивно предлагать решение.
http://www.useit.com/papers/heuristic/heuristic_list.html
Лучший выбор - четко уведомить пользователя об ошибке (не только где, но и почему...). Кроме того, пользовательский интерфейс должен быть достаточно четким, чтобы пользователь не мог разрешить ввод.
ИМХО, вы можете использовать JQuery для обработки ошибок, все еще оставляя типы html5, которые "семантически" лучше, чем обычные типы ввода.