使用 HTML5 的新输入类型显示表单错误

Question

目前，HTML5 的新输入类型

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

仅关注表单提交时用户输入不匹配的任何违规文本框。

问题：对焦没问题。然而，这是一种非常微妙的方式来告诉用户为什么表单没有提交。

以下哪一个是让用户知道出了什么问题的更好解决方案：

• Add css on a focus textbox by 添加背景颜色。依然是 稍微微妙，用户可能会 不能立即理解为什么 特定的文本框被聚焦。
• JavaScript 验证（jQuery 验证插件）用于显示错误消息。既然如此，我不妨使用普通的输入类型，并在这里完成所有操作。

欢迎提出建议！

Answer 1

根据良好的旧可用性启发法：

错误预防：
甚至比好的错误消息更好
是一个仔细的设计，可以防止
问题从一开始就发生
地方。要么消除容易出错的地方
条件或检查它们以及
向用户提供确认信息
在他们承诺之前选择
行动。

帮助用户识别、
诊断并从中恢复
错误：错误消息应该
用通俗易懂的语言表达（不
代码），准确指出
问题，并提出建设性建议
解决方案。

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

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

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

Answer 2

让它们变红。