Form Validation

Examples and patterns for form validation using Bootstrap 5.3's validation classes and feedback.

Basic validation

Please provide a first name.
Please provide a last name.
@
Please choose a username.
Please provide a valid email address.
Please provide a password.
Please provide a city.
Please select a state.
Please provide a zip.
You must agree before submitting.
															
<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

Please enter your first name.
Please enter a valid email.
																	<form class="needs-validation" novalidate>
  <div class="position-relative">
    <input class="form-control" required>
    <div class="invalid-tooltip">...</div>
  </div>
</form>
																

Custom feedback

Please provide a valid city.
Looks good!
																		<input class="form-control is-invalid" required>
<select class="form-select is-valid">...</select>