<div class="container mt-5">
<h2>Bootstrap 5 Form with Validation</h2>
<form class="needs-validation" novalidate>
<!-- Email -->
<div class="mb-3">
<label for="validationEmail" class="form-label">Email address</label>
<input type="email" class="form-control" id="validationEmail" required>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Please provide a valid email.</div>
</div>
<!-- Password -->
<div class="mb-3">
<label for="validationPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="validationPassword" required>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Please provide a password.</div>
</div>
<!-- Checkbox -->
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="validationCheck" required>
<label class="form-check-label" for="validationCheck">Agree to terms and conditions</label>
<div class="invalid-feedback">You must agree before submitting.</div>
</div>
<!-- Submit -->
<button class="btn btn-primary" type="submit">Submit</button>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
(() => {
'use strict';
const forms = document.querySelectorAll('.needs-validation');
Array.from(forms).forEach(form => {
form.addEventListener('submit', event => {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
})();
</script>