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

当使用支持HTML5的新版浏览器时(例如FireFox 4);
并且表单字段具有required='required'的属性;
并且表单域为空/空白;
并点击提交按钮;
浏览器检测到“必填”字段为空并且不提交表单;
而是浏览器显示一个提示,要求用户在该字段中输入文本。

现在,我没有一个文本字段,而是有一组复选框,其中至少有一个应该由用户检查/选择。

如何在这组复选框上使用HTML5 required属性? (因为只有一个复选框需要检查,所以我不能在每个复选框上放置required属性)

PS。 如果有问题,我正在使用simple_form。


UPDATE

HTML 5 multiple属性可以在这里帮助吗? 有没有人使用它之前做类似于我的问题?

UPDATE

看起来,HTML5规范不支持此功能: ISSUE-111:输入是什么。@ required for @type = checkbox?

(问题状态:问题在没有偏见的情况下被标记为关闭。)以下是解释。

更新2

这是一个古老的问题,但想澄清问题的原意是为了能够在不使用Javascript的情况下执行上述操作 - 即使用HTML5方式进行操作。 回想起来,我应该让“没有Javascript”更加明显。


不幸的是,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 。 基于此,您可以实施您的验证检查。


我想没有标准的HTML5方法来做到这一点,但如果你不介意使用jQuery库,我已经能够使用webshims的“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" />

我主要使用webshim来填充HTML5的功能,但它也有一些很好的可选扩展,比如这个。

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


它是一个简单的技巧。 这是jQuery代码,可以通过更改required属性来检查html5验证。 以下是您的html代码(请确保您添加了该组中所有元素所需的内容。)

<input type="checkbox" name="option[]" id="option-1" value="option1" required/> Option 1
<input type="checkbox" name="option[]" id="option-2" value="option2" required/> Option 2
<input type="checkbox" name="option[]" id="option-3" value="option3" required/> Option 3
<input type="checkbox" name="option[]" id="option-4" value="option4" required/> Option 4
<input type="checkbox" name="option[]" id="option-5" value="option5" required/> Option 5

以下是jQuery脚本,如果选择任何一个脚本,它将禁用进一步的验证检查。 选择使用名称元素。

$cbx_group = $("input:checkbox[name='option[]']");
$cbx_group = $("input:checkbox[id^='option-']"); // name is not always helpful ;)

$cbx_group.prop('required', true);
if($cbx_group.is(":checked")){
  $cbx_group.prop('required', false);
}

小问题在这里:由于您使用的是html5验证,因此请确保您在验证之前即在表单提交之前执行此操作。

// but this might not work as expected
$('form').submit(function(){
  // code goes here
});

// So, better USE THIS INSTEAD:
$('button[type="submit"]').on('click', function() {
  // skipping validation part mentioned above
});
链接地址: http://www.djcxy.com/p/9583.html

上一篇: Using the HTML5 "required" attribute for a group of checkboxes?

下一篇: Testing if a checkbox is checked with jQuery