Bootstrap natively hooks into the fundamental HTML5 form validation process (utilizing standard attributes like required, minlength, and pattern). By doing this natively, it completely overrides the ugly, wildly varying OS-default browser popup bubbles, securely replacing them with gorgeous, unified green success icons and glaring red error outlines!
Bootstrap relies entirely on a foundational class called .was-validated. When this class is dynamically placed upon the wrapper <form> element natively (typically injected via Javascript following a failed submission attempt), the entire form's CSS recursively cascades down to highlight every single input inside displaying either as valid (green) or fundamentally invalid (red) relying specifically entirely upon native HTML5 validation constraints.
Crucial Rule: You strictly must append the novalidate boolean property natively onto the root <form> HTML tag to decisively stop standard browser engines from utilizing their default tooltip bubbles!
<!-- 'novalidate' disables native popup tooltips. '.was-validated' triggers CSS outlines! -->
<form class="was-validated" novalidate>
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<input type="text" class="form-control" id="username" required>
<!-- Sibling text message dynamically shows up red when input fails 'required' validation! -->
<div class="invalid-feedback">
Username is strictly required.
</div>
</div>
</form>Validation styles behave universally flawlessly across all native UI controls! Not strictly limited to text blocks, Bootstrap's CSS tracks validation seamlessly across Textareas, dropdown Select bars, and notably inside custom Checkboxes!
<!-- Checkbox Validation Demo! -->
<div class="form-check">
<input type="checkbox" class="form-check-input" id="termsCheck" required>
<label class="form-check-label" for="termsCheck">Agree to terms</label>
<div class="invalid-feedback">You absolutely must check this box.</div>
</div>If you prefer directly authenticating inputs via an external backend server natively (such as via PHP logic) significantly before sending data directly back to the active user, you shouldn't strictly utilize the broad `.was-validated` wrapper array! Instead, explicitly append the .is-valid (for successful inputs) and dramatically append .is-invalid (for errors) directly precisely upon the raw <input> elements themselves.
<!-- We omitted the '.was-validated' on the parent form here explicitly! -->
<!-- PHP logically inserted class="... is-invalid" because backend threw an error -->
<input type="text" class="form-control is-invalid" id="sysAlias" value="Bob">
<div class="invalid-feedback">
Username taken natively inside the structural database!
</div>