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

【问题标题】：Displaying form errors with HTML5's new input types使用 HTML5 的新输入类型显示表单错误
【发布时间】：2010-07-23 20:24:25
【问题描述】：

目前，HTML5 的新输入类型，

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

只需关注提交表单时用户输入不匹配的任何有问题的文本框。

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

以下哪个是让用户知道问题所在的更好解决方案：

欢迎提出建议！

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

让它们变红。

【讨论】：