当使用支持 HTML5 的较新浏览器时(例如 FireFox 4);
并且表单字段具有属性 required='required'
;
并且表单字段为空/空白;
并点击提交按钮;
浏览器检测到“必填”字段为空,因此不会提交表单;
浏览器会显示一个提示,要求用户在该字段中键入文本。
现在,我有一组复选框,而不是单个文本字段,其中至少有一个应该由用户选中/选择。
如何在这组复选框上使用 HTML5 required
属性?
(因为只有一个复选框需要被选中,所以我不能将 required
属性放在每个复选框上)
附言。我正在使用 simple_form ,如果这很重要的话。
更新
可以 HTML 5 multiple
attribute在这里有帮助吗?有没有人用过它来做与我的问题类似的事情?
更新
似乎 HTML5 规范不支持此功能: ISSUE-111: What does input.@required mean for @type = checkbox?
(问题状态:问题已被标记为已关闭且无偏见。) 和 here is the explanation .
更新 2
这是一个老问题,但想澄清一下,这个问题的初衷是能够在不使用 Javascript 的情况下完成上述操作——即使用 HTML5 的方式来完成。回想起来,我应该让“没有 Javascript”更加明显。
最佳答案
不幸的是,HTML5 没有提供开箱即用的方式来做到这一点。
但是,使用 jQuery,您可以轻松地控制复选框组是否至少有一个选中的元素。
考虑以下 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
。
在此基础上,您可以实现验证检查。
关于forms - 对一组复选框使用 HTML5 "required"属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6218494/