当使用支持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>
其他回答
我们也可以用html5轻松做到这一点，只需要添加一些jquery代码
Demo
HTML
<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');
}
});
});
我想没有标准的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功能，但它也有一些很棒的可选扩展，比如这个。
它甚至允许您编写自己的自定义有效性规则。例如，我需要创建一个不是基于输入名称的复选框组，所以我为此编写了自己的有效性规则…
这是另一个使用Jquery的简单技巧!! 超文本标记语言
<form id="hobbieform">
<div>
<input type="checkbox" name="hobbies[]">Coding
<input type="checkbox" name="hobbies[]">Gaming
<input type="checkbox" name="hobbies[]">Driving
</div>
</form>
JQuery
$('#hobbieform').on("submit", function (e) {
var arr = $(this).serialize().toString();
if(arr.indexOf("hobbies") < 0){
e.preventDefault();
alert("You must select at least one hobbie");
}
});
这就是. .这是因为如果没有选中任何复选框，则有关复选框组的任何内容(包括其名称)都不会发布到服务器
Try:
self.request.get('sports_played', allow_multiple=True)
or
self.request.POST.getall('sports_played')
更具体地说:
当你从复选框数组中读取数据时，确保array具有:
len>0
在这种情况下:
len(self.request.get('array', allow_multiple=True)) > 0
这并不需要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>
