Form Validation
Examples and patterns for form validation using Bootstrap 5.3's validation classes and feedback.
Basic validation
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="" required>
<div class="invalid-feedback">Please provide a first name.</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" required>
<div class="invalid-feedback">Please provide a last name.</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">@</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">Please choose a username.</div>
</div>
</div>
<div class="col-md-6">
<label for="validationEmail" class="form-label">Email</label>
<input type="email" class="form-control" id="validationEmail" required>
<div class="invalid-feedback">Please provide a valid email address.</div>
</div>
<div class="col-md-6">
<label for="validationPassword" class="form-label">Password</label>
<input type="password" class="form-control" id="validationPassword" required>
<div class="invalid-feedback">Please provide a password.</div>
</div>
<div class="col-md-4">
<label for="validationCity" class="form-label">City</label>
<input type="text" class="form-control" id="validationCity" required>
<div class="invalid-feedback">Please provide a city.</div>
</div>
<div class="col-md-4">
<label for="validationState" class="form-label">State</label>
<select class="form-select" id="validationState" required>
<option selected disabled value="">Choose...</option>
<option>California</option>
<option>Texas</option>
<option>New York</option>
</select>
<div class="invalid-feedback">Please select a state.</div>
</div>
<div class="col-md-4">
<label for="validationZip" class="form-label">Zip</label>
<input type="text" class="form-control" id="validationZip" required>
<div class="invalid-feedback">Please provide a zip.</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">Agree to terms and conditions</label>
<div class="invalid-feedback">You must agree before submitting.</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
Tooltip validation
<form class="needs-validation" novalidate>
<div class="position-relative">
<input class="form-control" required>
<div class="invalid-tooltip">...</div>
</div>
</form>
Custom feedback
<input class="form-control is-invalid" required>
<select class="form-select is-valid">...</select>