user-interface - 使用 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

最好的选择是清楚地通知用户错误（不仅是发生在哪里，还有为什么......）。在此之上，UI 应该足够清晰，以防止用户进行不允许的输入。

恕我直言，您可以使用 JQuery 进行错误处理，仍然保留 html5 类型，这些类型在“语义上”比普通输入类型更好。

Answer 2

让他们变红。