Отображение ошибок формы с новыми типами ввода HTML5

Question

В настоящее время новые типы ввода HTML5,

<input type="number"...>
<input type="email"...>
<input type="url"...>

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

Проблема : Фокусировка в порядке. Однако это очень тонкий способ объяснить пользователю, почему форма не отправляется.

Какое из них является лучшим решением, чтобы сообщить пользователю, что случилось:

• Добавить CSS в текстовое поле с добавив цвет фона. Это все еще слегка тонкий и пользователь может не сразу понимаю, почему конкретное текстовое поле сфокусировано.
• Проверка Javascript (jQuery плагин проверки) для отображения сообщений об ошибках. В этом случае я мог бы также использовать обычные типы ввода и делать все здесь.

Предложения приветствуются!

Answer 1

Согласно старой доброй эвристике юзабилити:

Предотвращение ошибок : Даже лучше, чем хорошие сообщения об ошибках, это продуманный дизайн, который в первую очередь предотвращает возникновение проблемы.Либо устраните подверженные ошибкам условия, либо проверьте их и предоставьте пользователям возможность подтверждения, прежде чем они совершат действие.

Помогите пользователям распознавать, диагностировать и устранять ошибки : сообщения об ошибках должныбыть выраженным простым языком (без кодов), точно указать проблему и конструктивно предложить решение.

http://www.useit.com/papers/heuristic/heuristic_list.html

Лучший выбор - четко уведомить пользователя оошибка (не только где произошло, но и почему ...).Кроме того, пользовательский интерфейс должен быть достаточно четким, чтобы пользователь не мог разрешить ввод.

ИМХО, вы можете использовать JQuery для обработки ошибок, оставляя типы html5, которые "семантически" лучше, чем обычные типы ввода.

Answer 2

Заставьте их покраснеть.