HTML5错误消息

Question

在我的应用程序中，我有多个选项卡。在选项卡中，我有输入字段，我想在客户端验证这些字段。为此，我尝试使用HTML5属性，例如required属性或pattern属性。如果在第一个选项卡中选择了空字段（需要字段），则会出现错误消息The field is required，但是当我在其他选项卡（例如第三个选项卡中）中有空字段并且选择了第一个选项卡时，错误消息不会出现。

问题 在这种情况下，有没有办法组织HTML5验证？

Answer 1

您是否隐藏表格元素display: none？如果你的元素是不可见的，他们will not trigger the validation UI：

报告在未处理无效控件提供给用户的 元件中的至少一个的约束问题。用户代理 可以通过运行该元素的聚焦步骤并且可以改变该文档的滚动位置 或者执行一些其他动作，使得元素 引起用户的注意，可以将这些元素中的一个聚焦在该过程中。用户代理可能会报告多个违反约束的 。如果合适的话，用户代理可以合并相关约束报告 违例报告（例如，如果 组中的多个单选按钮被标记为需要，仅需要报告一个错误）。 如果控件的一个 未呈现（例如，它具有隐藏的 属性集），则用户代理可能会报告脚本错误。

在这种情况下，你将不得不听invalid事件与自己的脚本，并进行适当的行动。