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