Bootstrap provides validation states — valid (green) and invalid (red) — for form controls. Trigger them by adding .was-validated to the <form> element or by manually adding .is-valid / .is-invalid to individual controls.
Add .valid-feedback or .invalid-feedback elements after the input to show contextual messages. They are hidden until the appropriate state class is active.
<form class="needs-validation" novalidate>
<div class="mb-3">
<label for="uname" class="form-label">Username</label>
<input type="text" class="form-control" id="uname" required
minlength="3">
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Username must be at least 3 characters.</div>
</div>
<button class="btn btn-primary" type="submit">Submit</button>
</form>
<script>
document.querySelector(".needs-validation").addEventListener("submit", e => {
if (!e.target.checkValidity()) e.preventDefault();
e.target.classList.add("was-validated");
});
</script>Use the novalidate attribute on the form to suppress browser-native validation bubbles — Bootstrap's UI replaces them with cleaner inline messages.