xxxxxxxxxx1
<form class="row g-3 needs-validation" novalidate>2
<div class="mb-3 pb-1">3
<div class="form-check">4
<input type="radio" class="form-check-input" id="validationFormCheck2" name="radio-stacked" required />5
<label class="form-check-label" for="validationFormCheck2">Toggle this radio</label>6
</div>7
<div class="form-check mb-3">8
<input type="radio" class="form-check-input" id="validationFormCheck3" name="radio-stacked" required />9
<label class="form-check-label" for="validationFormCheck3">Or toggle this other radio</label>10
<div class="invalid-feedback">More example invalid feedback text</div>11
</div>12
</div>13
14
<div class="btn-group mb-4">15
<input type="radio" class="btn-check" name="options" id="option1" autocomplete="off" required />16
<label class="btn btn-secondary" for="option1" data-mdb-ripple-init>Checked</label>17
18
<input type="radio" class="btn-check" name="options" id="option2" autocomplete="off" required/>19
<label class="btn btn-secondary" for="option2" data-mdb-ripple-init>Radio</label>20
21
<input type="radio" class="btn-check" name="options" id="option3" autocomplete="off" required/>22
<label class="btn btn-secondary" for="option3" data-mdb-ripple-init>Radio</label>23
<div class="invalid-feedback mt-5">More example invalid feedback text</div>24
</div>25
26
<div class="mb-3">27
<button class="btn btn-primary" type="submit" data-mdb-ripple-init>Submit form</button>28
</div>29
</form>1
1
xxxxxxxxxx1
// Example starter JavaScript for disabling form submissions if there are invalid fields2
(() => {3
'use strict';4
5
// Fetch all the forms we want to apply custom Bootstrap validation styles to6
const forms = document.querySelectorAll('.needs-validation');7
8
// Loop over them and prevent submission9
Array.prototype.slice.call(forms).forEach((form) => {10
form.addEventListener('submit', (event) => {11
if (!form.checkValidity()) {12
event.preventDefault();13
event.stopPropagation();14
}15
form.classList.add('was-validated');16
}, false);17
});18
})(); Console errors: 0