javascript - HTML5 Required 字段错误信息问题

Question

我正在处理这个非常长且复杂的表格，但我会尽量让我的示例非常基本。该表单有 200 多个字段，并且有许多条件变化。

举个例子，假设我的表单以一个问题开头，并且有两个单选按钮选项。问题是这样的:

你有车吗？回答是或否。

如果您回答“否”，它会显示 100 个问题(以及它自己的其他条件)，假设这 100 个问题中有 50 个是必需的。

如果您回答"is"，它会显示 100 个问题(以及它自己的其他条件)，假设这 100 个问题中有 50 个是必需的。

我有一些 JavaScript 在表单提交时将任何隐藏字段标记为禁用，这样隐藏的必需字段就不会挂起表单。以这种方式完美地工作。但我遇到的问题是，如果我回答是，并且我回答了 50 个必填字段中的 40 个，由于隐藏字段，html5 错误消息不会出现。

我想做的是，当一个字段未填写但需要填写时，它会做一些事情而不是弹出错误消息。比如将文本颜色更改为红色或其他颜色。

使用默认的 HTML5 验证是否可行？

Answer 1

您可以使用 CSS 伪类来实现其中的一些，但根据您对问题的解释，我不确定这是否能回答您的整个问题。

对于必填字段和包含无效数据的字段(注意；在这种情况下，空字段的文本颜色默认为红色):

:invalid:required { 颜色:红色； }

对于必填且具有有效数据的字段:

:valid:required { 颜色:绿色； }