我正在寻求一些关于使复选框成为必需的帮助。
我正在构建一个基于 bootstrap 4 的表单。我正在通过 bootstrap 文档中的 JS 示例验证表单,方法是向表单添加“novalidate”,向输入添加“required”,并添加以下脚本:
(function() {
'use strict';
window.addEventListener('load', function() {
var form = document.getElementById('forms');
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
}, false);
})();
一切进展顺利,但现在我有几个复选框,我只想在用户至少选中一个时验证它。我在想,我是否应该创建一个不同的函数来验证这一点,或者在当前函数的基础上构建。无论哪种情况,如果有人能帮助我,我将不胜感激。
这是复选框的代码:
<div class="form-row">
<div class="form-group col-md-4">
<label for="checkboxes">Indícios:</label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" id="" type="checkbox" value="1">
1
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="2">
2
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="3">
3
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="4">
4
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="5">
5
</label>
</div>
</div>
<div class="form-group col-md-4">
<label for="checkboxes1"> </label>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" id="checkboxes1" value="6">
6
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="7">
7.
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="8">
8
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" value="9">
9
</label>
</div>
</div>
</div>
提前致谢!
最佳答案
既然你提到你在这里使用 jQuery 是一个你可以添加到你的 checkValidity 方法的函数
function checkCheckboxes = function() {
return ($('.form-check-input:checked').length > 0);
};
此函数检查 html 中是否有任何具有类 .form-check-input 和 :checked 状态的输入。如果是,则复选框验证有效。
关于javascript - 无法使复选框成为必填项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47204282/