对一组复选框使用HTML5“required”属性？

Question

对一组复选框使用HTML5“required”属性？使用支持HTML5的新浏览器时（例如FireFox 4）; 并且表单字段具有该属性required='required'; 表格字段为空/空白; 然后点击提交按钮; 浏览器检测到“required”字段为空并且不提交表单; 而是浏览器显示一个提示，要求用户在该字段中键入文本。现在，我有一组复选框，而不是单个文本字段，其中至少有一个复选框应由用户检查/选择。如何required在此组复选框上使用HTML5 属性？（由于只需要检查其中一个复选框，我不能将该required属性放在每个复选框上）PS。我正在使用simple_form，如果这很重要的话。

Answer 1

不幸的是，HTML5并没有提供开箱即用的方法。

但是，使用jQuery，您可以轻松控制复选框组是否至少包含一个checked元素。

考虑以下DOM片段：

<div class="checkbox-group required">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]">
    <input type="checkbox" name="checkbox_name[]"></div>

您可以使用此表达式：

$('div.checkbox-group.required :checkbox:checked').length > 0

true如果至少检查一个元素，则返回。基于此，您可以实施验证检查。

Answer 2

我想没有标准的HTML5方法可以做到这一点，但是如果你不介意使用jQuery库，我已经能够使用webshims的“ group-required ”验证功能实现“复选框组”验证：

小组要求的文档说：

如果复选框具有“group-required”类，则必须至少检查表单/文档中具有相同名称的复选框之一。

这是一个如何使用它的例子：

<input name="checkbox-group" type="checkbox" class="group-required" id="checkbox-group-id" /><input name="checkbox-group" type="checkbox" /><input name="checkbox-group" type="checkbox" /><input name="checkbox-group" type="checkbox" /><input name="checkbox-group" type="checkbox" />

我主要使用webshims来填充HTML5功能，但它也有一些像这样的可选扩展。

它甚至允许您编写自己的自定义有效性规则。例如，我需要创建一个不基于输入名称的复选框组，所以我为此编写了自己的有效性规则 ...