当使用支持HTML5的新浏览器时(例如FireFox 4); 表单字段有required='required'属性; 表单字段为空/空白; 然后点击提交按钮; 浏览器检测到“required”字段为空，不提交表单;相反，浏览器显示一个提示，要求用户在字段中输入文本。
现在，我有了一组复选框，而不是单一的文本字段，其中至少有一个应该由用户选中/选择。
如何在这组复选框上使用HTML5 required属性? (因为只有一个复选框需要被选中，我不能把所需的属性放在每个复选框上)
ps.我使用simple_form，如果这很重要。
更新
HTML 5的多重属性在这里有用吗?以前有人用它来做类似我的问题吗?
更新
HTML5规范似乎不支持这个特性:ISSUE-111:什么是输入?@type =复选框的@required mean ?
(发行状态:发行已被标记为已关闭。) 下面是解释。
更新2
这是一个老问题，但我想澄清的是，这个问题的最初意图是能够在不使用Javascript的情况下完成上述工作——即使用HTML5的方式来完成。回想起来，我应该更明显地说明“没有Javascript”。
当前回答
这并不需要jQuery。这里是一个纯JS概念的证明，使用了一个事件监听器在复选框的父容器上(checkbox-group-required)，复选框元素的.checked属性和array# some。
const validate = el => { const checkboxes = el.querySelectorAll('input[type="checkbox"]'); return [...checkboxes].some(e => e.checked); }; const formEl = document.querySelector("form"); const statusEl = formEl.querySelector(".status-message"); const checkboxGroupEl = formEl.querySelector(".checkbox-group-required"); checkboxGroupEl.addEventListener("click", e => { statusEl.textContent = validate(checkboxGroupEl) ? "valid" : "invalid"; }); formEl.addEventListener("submit", e => { e.preventDefault(); if (validate(checkboxGroupEl)) { statusEl.textContent = "Form submitted!"; // Send data from e.target to your backend } else { statusEl.textContent = "Error: select at least one checkbox"; } }); <form> <div class="checkbox-group-required"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </div> <input type="submit" /> <div class="status-message"></div> </form>
如果你有多个组要验证，在每个组上添加一个循环，可选地添加错误消息或CSS来指示哪个组验证失败:
const validate = el => { const checkboxes = el.querySelectorAll('input[type="checkbox"]'); return [...checkboxes].some(e => e.checked); }; const allValid = els => [...els].every(validate); const formEl = document.querySelector("form"); const statusEl = formEl.querySelector(".status-message"); const checkboxGroupEls = formEl.querySelectorAll(".checkbox-group-required"); checkboxGroupEls.forEach(el => el.addEventListener("click", e => { statusEl.textContent = allValid(checkboxGroupEls) ? "valid" : "invalid"; }) ); formEl.addEventListener("submit", e => { e.preventDefault(); if (allValid(checkboxGroupEls)) { statusEl.textContent = "Form submitted!"; } else { statusEl.textContent = "Error: select at least one checkbox from each group"; } }); <form> <div class="checkbox-group-required"> <label> Group 1: <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </label> </div> <div class="checkbox-group-required"> <label> Group 2: <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </label> </div> <input type="submit" /> <div class="status-message"></div> </form>
其他回答
受到@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向导可以更严格地使用它?
纯JS解决方案:
const group = document.querySelectorAll('[name="myCheckboxGroup"]');
function requireLeastOneChecked() {
var atLeastOneChecked = false;
for (i = 0; i < group.length; i++)
if (group[i].checked)
atLeastOneChecked = true;
if (atLeastOneChecked)
for (i = 0; i < group.length; i++)
group[i].required = false;
else
for (i = 0; i < group.length; i++)
group[i].required = true;
}
requireLeastOneChecked(); // onload
group.forEach(function ($el) {
$el.addEventListener('click', function () { requireLeastOneChecked(); })
});
不幸的是，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。 在此基础上，您可以实现验证检查。
嗨，只是使用一个文本框附加组复选框。当单击任何复选框时，在该文本框中输入值。使该文本框必须和只读。
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将确保至少选中一个复选框，然后取消对整个复选框组的要求。如果选中的复选框变为未选中，那么它将再次需要所有的复选框!
