多个复选框具有相同名称的必需属性？ [英] Required attribute on multiple checkboxes with the same name?

问题描述

我有一个复选框列表具有相同名称属性，我需要验证其中至少有一个已被选中。

但是，当我使用html5属性required时，浏览器（chrome& ff）不允许我提交表单，除非所有他们被检查。

示例代码：

 < label for = A-0 >一种-0℃; /标签> 
< input type =checkboxname =q-8id =a-0required /> 
< label for =a-1> a-1< / label> 
< input type =checkboxname =q-8id =a-1required /> 
< label for =a-2> a-2< / label> 
< input type =checkboxname =q-8id =a-2required /> 
  

在无线电输入中使用相同的格式时，表单按预期工作（如果选择了其中一个选项表单验证）

根据
lockquote

对于复选框，只有当该表单中具有该名称的复选框中的一个或多个复选框被选中时，才能满足必需的属性。

对于单选按钮，必需属性只应当这个无线电组中的一个单选按钮被选中时，它就会被满足。

我做错了什么，或者这是一个浏览器bug（在chrome和ff上）??

解决方案

对不起，现在我读了你期望的更好，所以我更新答案。

基于在W3C的 HTML5规范上，没有任何问题。我创建了这个JSFiddle测试，它的行为基于规格正确（对于那些基于例如Chrome 11和Firefox 4）：

< form> < input type =checkboxname =qid =a-0required required autofocus> < label for =a-0> a-1< / label> <峰; br> < input type =checkboxname =qid =a-1required> < label for =a-1> a-2< / label> <峰; br> < input type =checkboxname =qid =a-2required> < label for =a-2> a-3< / label> <峰; br> < input type =submit>< / form>

<我同意这不是很有用（实际上很多人都抱怨过它在 /2010Apr/0008.htmlrel =noreferrer> W3C的邮件列表）。 但是浏览器只是遵循标准的建议，这是正确的。该标准有点误导性，但我们在实践中无法做任何事情。 您可以始终使用JavaScript进行表单验证，不过，就像一些非常棒的jQuery验证插件一样。

另一种方法是选择 polyfill 可以使（几乎）所有浏览器都正确地解释表单验证。

I have a list of checkboxes with the same name attribute, and I need to validate that at least one of them has been selected.

But when I use the html5 attribute "required" on all of them, the browser (chrome & ff) doesn't allow me to submit the form unless all of them are checked.

sample code:

<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 />

When using the same with radio inputs, the form works as expected (if one of the options is selected the form validates)

According to Joe Hopfgartner (who claims to quote the html5 specs), the supposed behaviour is:

For checkboxes, the required attribute shall only be satisfied when one or more of the checkboxes with that name in that form are checked.

For radio buttons, the required attribute shall only be satisfied when exactly one of the radio buttons in that radio group is checked.

am i doing something wrong, or is this a browser bug (on both chrome & ff) ??

解决方案

Sorry, now I've read what you expected better, so I'm updating the answer.

Based on the HTML5 Specs from W3C, nothing is wrong. I created this JSFiddle test and it's behaving correctly based on the specs (for those browsers based on the specs, like Chrome 11 and Firefox 4):

<form>
    <input type="checkbox" name="q" id="a-0" required autofocus>
    <label for="a-0">a-1</label>
    <br>

    <input type="checkbox" name="q" id="a-1" required>
    <label for="a-1">a-2</label>
    <br>

    <input type="checkbox" name="q" id="a-2" required>
    <label for="a-2">a-3</label>
    <br>

    <input type="submit">
</form>

I agree that it isn't very usable (in fact many people have complained about it in the W3C's mailing lists).

But browsers are just following the standard's recommendations, which is correct. The standard is a little misleading, but we can't do anything about it in practice. You can always use JavaScript for form validation, though, like some great jQuery validation plugin.

Another approach would be choosing a polyfill that can make (almost) all browsers interpret form validation rightly.

这篇关于多个复选框具有相同名称的必需属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！