无效的必填字段和 Firefox 问题答案

【问题标题】：Inactive required fields and Firefox issue无效的必填字段和 Firefox 问题
【发布时间】：2012-11-19 00:51:12
【问题描述】：

在下拉列表中使用 jQuery 来根据下拉选择显示/隐藏文本输入字段会导致 Firefox 出现奇怪的行为，在填充所有“必填”字段之前不允许提交表单，即使这些必填字段是基于隐藏的在从下拉列表中选择时，或者可以说，它们实际上是不活动的。

Safari，只是忽略不可见的“必填”字段，只检查活动（可见）的必填字段，如果这些都填写了，就可以提交表单了。

我试图四处寻找任何出现的情况和可能的解决方案，但似乎没有找到。

例子：

<select id="theselect" name="something">
    <option value="1" selected>One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<input type="text" name="one" required="required" class="show" />
<input type="text" name="two" required="" class="hide" />
<input type="text" name="three" required="required" class="hide" />

在上面的例子中，考虑到输入 2 和 3 是隐藏的，但如果选择更改为 2 或 3 则需要，这将改变相应输入的状态/可见性，Firefox 强制所有需要的填充。

有没有人经历过这个和/或知道如何使用 jQuery 有效地管理这个？提前感谢您对此的任何想法和帮助。

【问题讨论】：

在切换显示的同时使用prop()方法切换required

标签： jquery forms validation firefox show-hide

【解决方案1】：

即使是“隐藏”的字段也会提交。因此，如果它们被标记为“必需”，它们将导致验证失败。规范对此非常清楚。

您可能希望将它们设置为不需要，或者在隐藏它们时将它们设置为禁用，这取决于您是否真的希望它们以未设置状态提交。

【讨论】：

谢谢鲍里斯，是的，事实上这就是方法，但据我测试，这是一个 Firefox 特定的问题。好的，为了跨浏览器的兼容性，必须更改它们的属性并将它们设置为不需要。
如果这是特定于 Firefox 的，这意味着其他浏览器没有按照规范所说的那样做。 :(
好吧，至少 Mac 上的 Safari 会忽略任何隐藏的内容，同时验证字段，但是，我发现我正在处理的问题完全超出了浏览器范围（尽管我提到了是真的，关于浏览器的行为）。我发现这要复杂得多，因为 mootools validate.js 如果在该字段中找到所需的 css 类，则会强制使用 aria-invalid、aria-required 和 required="required"。现在使用上面提到的方法来删除或添加所需的属性只是一堆条件，可能最好禁用 validate.js。
是的，听起来 Safari 正在实施一个非常早期的规范草案，而不是现在的规范。