如何验证表单中的隐藏输入字段/更改验证行为？答案

【问题标题】：How to validate a hidden input field in a form / change validation behavior?如何验证表单中的隐藏输入字段/更改验证行为？
【发布时间】：2021-10-29 06:22:30
【问题描述】：

我有一个带有多个输入的 HTML 表单，这些输入具有 required 属性，因此在提交表单时会自动验证。这很好用，但我还有一个 type='checkbox' 的输入字段，由于特殊的 CSS 样式，它需要不可见/隐藏，这会更改 label 的外观以显示样式复选框。但是这个复选框输入字段也需要验证（它具有required 属性）。

所以当表单提交时，浏览器（这里是Chrome）无法聚焦不可见字段，所以在UI中什么都不做，报错

An invalid form control with name='consent' is not focusable.

当标签元素无效时，如何覆盖表单验证以聚焦标签元素而不是不可见的input 元素？是否有任何有用的表单验证事件可以用来改变这种行为？

提前致谢。

编辑：这有点类似于 OPs 问题和这里的答案：https://stackoverflow.com/a/23215333/15717315

编辑 2：我可以选择使用 jQuery。

这是目前的样子：

<div>
    <input type='checkbox' id='myfield' class='my-styled-checkbox' name='myfield' required>
    <label for='myfield'>
        The label
    </label>
</div>

编辑 3：

好的，所以我在表单的submit 事件中添加了一个事件侦听器。这成功地防止了在未选中复选框时提交。

document.getElementById("myform").addEventListener("submit", function(e) {
    var field = document.getElementById("myfield");
    if (field.checked) {
        field.setCustomValidity("");
        e.returnValue = true;
    }
    else {
        field.setCustomValidity("Invalid");
        e.returnValue = false;
    }
});

但它仍然会抛出与 OP 中相同的错误，并且不会显示验证消息。

【问题讨论】：

您显然不能要求隐藏复选框，因此您必须编写代码来摆脱这种情况。如果样式复选框未选中，您可以将表单有效性设置为 false
请看我的“编辑3”。

标签： javascript html forms validation user-interface

【解决方案1】：

如果您提供代码示例，将会很有帮助。还要知道您是否正在使用任何框架或库，例如 react、angular 等。

类似的CSS属性

可见性：隐藏；

或

显示：无；

不要阻止您使用 js 代码编辑 DOM。因此，您应该能够在提交之前更改字段值。

另外，如果用户无法编辑该字段，您可以不将其设为必填字段并为其分配默认值。这样你就确定它永远不会提交为空。

看起来您正在尝试集中该字段，这不是您想要的，您应该尝试使用 js 或 jquery 更改字段的值。

【讨论】：