Seeking assistance on making checkboxes required.
I am creating a form using bootstrap 4 and validating it using the JS example from bootstrap documentation. I have added "novalidate" to the form, "required" to inputs, and included the following script:
(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);
})();
Everything is working smoothly so far, but I now have multiple checkboxes and I want to validate them only if at least one is checked. Should I create a separate function for this or modify the existing one? Any help on this would be greatly appreciated.
Below is the code for the checkboxes:
<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>
Thank you in advance for your help!