Zab*_*bba 150 forms validation checkbox html5
使用支持HTML5的新浏览器时(例如FireFox 4);
并且表单字段具有该属性required='required';
表格字段为空/空白;
然后点击提交按钮;
浏览器检测到"required"字段为空并且不提交表单;
而是浏览器显示一个提示,要求用户在该字段中键入文本.
现在,我有一组复选框,而不是单个文本字段,其中至少有一个复选框应由用户检查/选择.
如何required在此组复选框上使用HTML5 属性？(由于只需要检查其中一个复选框,我不能将该required属性放在每个复选框上)
PS.我正在使用simple_form,如果这很重要的话.
UPDATE
可以在HTML 5 multiple的属性是有帮助吗？有没有人用它来做类似我问题的事情？
这似乎是这个功能不是HTML5规范的支持: ISSUE-111:什么是输入@需要均值@type =复选框？
(问题状态:问题已被标记为关闭而没有偏见.)以下是解释.
这是一个老问题,但是想澄清一下,问题的初衷是能够在不使用Javascript的情况下完成上述操作 - 即使用HTML5方式.回想起来,我应该让"没有Javascript"更加明显.
Luc*_*oli 68
不幸的是,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如果至少检查一个元素,则返回.基于此,您可以实施验证检查.
the*_*raw 13
这是一个简单的技巧.这是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脚本,如果选择了任何一个脚本,它将禁用进一步的验证检查.使用name元素选择.
$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
});
Tyl*_*ick 11
我想没有标准的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功能,但它也有一些像这样的可选扩展.
它甚至允许您编写自己的自定义有效性规则.例如,我需要创建一个不基于输入名称的复选框组,所以我为此编写了自己的有效性规则 ...
小智 8
HTML5不直接支持只需要在复选框组中选中一个/至少一个复选框.这是我使用Javascript的解决方案:
HTML
<input class='acb' type='checkbox' name='acheckbox[]' value='1' onclick='deRequire("acb")' required> One
<input class='acb' type='checkbox' name='acheckbox[]' value='2' onclick='deRequire("acb")' required> Two
JAVASCRIPT
function deRequireCb(elClass) {
el=document.getElementsByClassName(elClass);
var atLeastOneChecked=false;//at least one cb is checked
for (i=0; i<el.length; i++) {
if (el[i].checked === true) {
atLeastOneChecked=true;
}
}
if (atLeastOneChecked === true) {
for (i=0; i<el.length; i++) {
el[i].required = false;
}
} else {
for (i=0; i<el.length; i++) {
el[i].required = true;
}
}
}
javascript将确保至少选中一个复选框,然后取消整个复选框组.如果选中的一个复选框变为未选中状态,则它将再次需要所有复选框!
受到 @thegauraw 和 @Brian Woodward 答案的启发，我为 JQuery 用户整理了一些内容，包括自定义验证错误消息：
$cbx_group = $("input:checkbox[name^='group']");
$cbx_group.on("click", function () {
if ($cbx_group.is(":checked")) {
// checkboxes become unrequired as long as one is checked
$cbx_group.prop("required", false).each(function () {
this.setCustomValidity("");
});
} else {
// require checkboxes and set custom validation error message
$cbx_group.prop("required", true).each(function () {
this.setCustomValidity("Please select at least one checkbox.");
});
}
});
请注意，我的表单默认选中了一些复选框。
也许你们中的一些 JavaScript/JQuery 向导可以进一步加强这一点？
我们也可以使用 html5 轻松做到这一点，只需要添加一些 jquery 代码
超文本标记语言
<form>
<div class="form-group options">
<input type="checkbox" name="type[]" value="A" required /> A
<input type="checkbox" name="type[]" value="B" required /> B
<input type="checkbox" name="type[]" value="C" required /> C
<input type="submit">
</div>
</form>
jQuery
$(function(){
var requiredCheckboxes = $('.options :checkbox[required]');
requiredCheckboxes.change(function(){
if(requiredCheckboxes.is(':checked')) {
requiredCheckboxes.removeAttr('required');
} else {
requiredCheckboxes.attr('required', 'required');
}
});
});
我向一组复选框添加了一个不可见的无线电。当至少选中一个选项时，收音机也将被设置为选中。当所有选项被取消时，收音机也被设置为取消。因此，表单使用单选提示“请检查至少一个选项”
display: none，因为无线电无法聚焦。超文本标记语言
<form>
<div class="checkboxs-wrapper">
<input id="radio-for-checkboxes" type="radio" name="radio-for-required-checkboxes" required/>
<input type="checkbox" name="option[]" value="option1"/>
<input type="checkbox" name="option[]" value="option2"/>
<input type="checkbox" name="option[]" value="option3"/>
</div>
<input type="submit" value="submit"/>
</form>
JavaScript
var inputs = document.querySelectorAll('[name="option[]"]')
var radioForCheckboxes = document.getElementById('radio-for-checkboxes')
function checkCheckboxes () {
var isAtLeastOneServiceSelected = false;
for(var i = inputs.length-1; i >= 0; --i) {
if (inputs[i].checked) isAtLeastOneCheckboxSelected = true;
}
radioForCheckboxes.checked = isAtLeastOneCheckboxSelected
}
for(var i = inputs.length-1; i >= 0; --i) {
inputs[i].addEventListener('change', checkCheckboxes)
}
CSS
.checkboxs-wrapper {
position: relative;
}
.checkboxs-wrapper input[name="radio-for-required-checkboxes"] {
position: absolute;
margin: 0;
top: 0;
left: 0;
width: 100%;
height: 100%;
-webkit-appearance: none;
pointer-events: none;
border: none;
background: none;
}
https://jsfiddle.net/codus/q6ngpjyc/9/