I have a simple form which has 2 checkboxes. I want to submit the form if any one of the checkbox is checked. Below code requires to check both of them. I tried grouping checkboxes by using name attribute but thats not sufficient, I am missing something. How can we group checkboxes for validation so that if any one is selected then form should be submited. Any suggestion would be helpful.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=".0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Check1" name="select" required>
<label class="form-check-label" for="Check1">Option 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Check2" name="select" required>
<label class="form-check-label" for="Check2">Option 2</label>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</body>
</html>
I have a simple form which has 2 checkboxes. I want to submit the form if any one of the checkbox is checked. Below code requires to check both of them. I tried grouping checkboxes by using name attribute but thats not sufficient, I am missing something. How can we group checkboxes for validation so that if any one is selected then form should be submited. Any suggestion would be helpful.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Check1" name="select" required>
<label class="form-check-label" for="Check1">Option 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Check2" name="select" required>
<label class="form-check-label" for="Check2">Option 2</label>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</body>
</html>
2 Answers
Reset to default 5Try the below.
Essentially it dynamically enables or disables the required attribute depending on whether at least one checkbox is checked. Then the browser validation is run as normal. But by only including one invalid-feedback div you only see one warning per "checkbox group".
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<form class="needs-validation" novalidate>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Check1" name="select" required>
<label class="form-check-label" for="Check1">Option 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Check2" name="select" required>
<label class="form-check-label" for="Check2">Option 2</label>
<div class="invalid-feedback">Choose at least one.</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery./jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn./bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
(function () {
'use strict';
window.addEventListener('load', function () {
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
var failed = false;
if ($("[name='select']:checked").length == 0) {
$("[name='select']").attr('required', true);
failed = true;
}
else {
$("[name='select']").attr('required', false);
}
if (form.checkValidity() === false) {
failed = true;
}
if (failed == true) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
</body>
</html>
remove the 'required' from the input tag.
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Check1" name="select" >
<label class="form-check-label" for="Check1">Option 1</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="Check2" name="select" >
<label class="form-check-label" for="Check2">Option 2</label>
</div>