HTML5必填项错误消息问题

HTML5 Required field error message issue

本文关键字：消息 问题 错误 HTML5      更新时间：2023-09-26

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

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

你有一辆车吗?回答"是"或"否"

如果你回答"否"，它将显示100个问题(附带其他条件)，假设这100个问题中有50个是必需的。

如果你回答Yes，它将显示100个问题(带有它自己的其他条件)，假设这100个问题中有50个是必需的。

我有一些JavaScript，在表单提交时将任何隐藏字段标记为禁用，以便隐藏的必需字段不会挂起表单。这种方式非常有效。但是我遇到的问题是，如果我回答是，我回答了50个必填字段中的40个，html5错误信息不会因为隐藏字段而出现。

我想做的是，当一个字段没有填充，但需要，它会做一些事情，而不是弹出错误消息。比如把文字颜色改成红色之类的

这是与默认的HTML5验证可行吗?

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

对于必需且具有无效数据的字段(注;在这种情况下，空字段的文本颜色默认为红色):

:invalid:required { color: red; }

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

:valid:required { color: green; }

为什么不直接更改输入元素的属性，以便在隐藏它们的同时删除所需的内容，而在显示它们时则相反呢?

(我可能误解了这个问题)

或者你可以onsubmit检查输入的值与属性required是否为空，然后做一个flash效果

相关文章：