这个问题在这里已有答案:
- 对一组复选框使用 HTML5“required”属性? 10 个答案
我有一个具有相同名称属性的复选框列表,我需要验证其中至少有一个已被选中。
但是当我在所有这些属性上使用 html5 属性“required”时,浏览器(chrome&ff)不允许我提交表单,除非检查所有这些属性。
示例代码:
<label for="a-0">a-0</label>
<input type="checkbox" name="q-8" id="a-0" required />
<label for="a-1">a-1</label>
<input type="checkbox" name="q-8" id="a-1" required />
<label for="a-2">a-2</label>
<input type="checkbox" name="q-8" id="a-2" required />
当使用相同的无线电输入时,表单按预期工作(如果选择其中一个选项,表单验证)
根据Joe Hopfgartner(谁声称引用 html5 规范),假设的行为是:
对于复选框,只有在选中该表单中具有该名称的一个或多个复选框时,才能满足必需属性。
对于单选按钮,只有在检查该无线电组中的一个单选按钮时,才能满足所需属性。
我做错了什么,或者这是一个浏览器错误(在 chrome 和 ff 上)?
8 回答
对不起,现在我已经更好地阅读了您的期望,所以我正在更新答案。
基于 W3C 的HTML5 规范,没有错。我创建了这个 JSFiddle 测试并且它的行为正确基于规格(对于那些基于规格的浏览器,如 Chrome 11 和 Firefox 4):
我同意它不是很有用(实际上很多人都在W3C 的邮件列表中抱怨过它)。
但浏览器只是遵循标准的建议,这是正确的。标准有点误导,但在实践中我们无法做任何事情。 您可以随时使用 JavaScript 进行表单验证,但,就像一些优秀的 jQuery 验证插件。
另一种方法是选择一个填充工具,它可以使(几乎)所有浏览器正确地解释表单验证。
你可以使用 jQuery 减少行数:
使用**$(':checkbox [13]')**您选择具有所需属性的所有复选框,然后,将.change 方法应用于此组复选框,您可以在此组的任何项目发生更改时执行所需的功能。在这种情况下,如果选中任何复选框,我将删除属于所选组的所有复选框的必需属性。
我希望这有帮助。
告别。
我有同样的问题,我的解决方案是将所需的属性应用于所有元素
当用户检查其中一个元素时,我从所有元素中删除了所需的属性:
以下是 icova 答案的改进。它还按名称对输入进行分组。
提供类似于@IvanCollantes 的答案的另一种方法。它的工作原理是按名称另外过滤所需的复选框。我也简化了代码。
一个小 jQuery 修复:
基于 icova 的答案,这是代码,因此您可以使用自定义 HTML5 验证消息: