使用 HTML5“必需"一组复选框的属性? [英] Using the HTML5 "required" attribute for a group of checkboxes?
问题描述
使用支持 HTML5 的较新浏览器(例如 FireFox 4)时;
并且表单字段具有属性 required='required'
;
并且表单字段为空/空白;
然后点击提交按钮;
浏览器检测到必需"字段为空且不提交表单;
相反,浏览器会显示提示,要求用户在字段中输入文本.
现在,我有一组复选框,而不是单个文本字段,其中至少有一个应该由用户选中/选择.
如何在这组复选框上使用 HTML5 required
属性?(由于只需要选中一个复选框,我不能在每个复选框上都加上 required
属性)
ps.如果这很重要,我正在使用 simple_form.
<小时>更新
可以 HTML 5 multiple
属性 在这里有用吗?有没有人以前用它来做与我的问题类似的事情?
更新
似乎HTML5 规范不支持此功能: ISSUE-111: input.@required 对@type = checkbox 意味着什么?
(问题状态:问题已无偏见地标记为关闭.)而这里是解释.
更新 2
这是一个老问题,但想澄清一下,这个问题的初衷是能够在不使用 Javascript 的情况下完成上述操作 - 即使用 HTML5 的方式来做到这一点.回想起来,我应该让没有 Javascript"更明显.
不幸的是,HTML5 没有提供开箱即用的方式来做到这一点.
但是,使用 jQuery,您可以轻松控制复选框组是否至少有一个选中的元素.
考虑以下 DOM 片段:
<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.checkbox-group.required :checkbox:checked').length >0
如果至少检查了一个元素,则返回 true
.在此基础上,您可以实施验证检查.
When using the newer browsers that support HTML5 (FireFox 4 for example);
and a form field has the attribute required='required'
;
and the form field is empty/blank;
and the submit button is clicked;
the browsers detects that the "required" field is empty and does not submit the form;
instead browser shows a hint asking the user to type text into the field.
Now, instead of a single text field, I have a group of checkboxes, out of which at least one should be checked/selected by the user.
How can I use the HTML5 required
attribute on this group of checkboxes?
(Since only one of the checkboxes needs to be checked, I can't put the required
attribute on each and every checkbox)
ps. I am using simple_form, if that matters.
UPDATE
Could the HTML 5 multiple
attribute be helpful here? Has anyone use it before for doing something similar to my question?
UPDATE
It appears that this feature is not supported by the HTML5 spec: ISSUE-111: What does input.@required mean for @type = checkbox?
(Issue status: Issue has been marked closed without prejudice.) And here is the explanation.
UPDATE 2
It's an old question, but wanted to clarify that the original intent of the question was to be able to do the above without using Javascript - i.e. using a HTML5 way of doing it. In retrospect, I should've made the "without Javascript" more obvious.
Unfortunately HTML5 does not provide an out-of-the-box way to do that.
However, using jQuery, you can easily control if a checkbox group has at least one checked element.
Consider the following DOM snippet:
<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>
You can use this expression:
$('div.checkbox-group.required :checkbox:checked').length > 0
which returns true
if at least one element is checked.
Based on that, you can implement your validation check.
这篇关于使用 HTML5“必需"一组复选框的属性?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!