Validation
Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.
Validation on BootstrapCustom styles
For custom Bootstrap form validation messages, you’ll need to add the novalidate boolean attribute to your form.This disables the browser default feedback tooltips, but still provides access to the form validation APIs in JavaScript. Try to submit the form below; our JavaScript will intercept the submit button and relay feedback to you. When attempting to submit, you’ll see the :invalid and :valid styles applied to your form controls.
Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback. Background icons for selects are only available with .form-select, and not .form-control.
Custom styles Example
<form class="row g-3 needs-validation" novalidate="">
<div class="col-md-4">
<label class="form-label" for="validationCustom01">First name</label>
<input class="form-control" id="validationCustom01" type="text" value="Mark" required="" />
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-4">
<label class="form-label" for="validationCustom02">Last name</label>
<input class="form-control" id="validationCustom02" type="text" value="Otto" required="" />
<div class="valid-feedback">Looks good!</div>
</div>
<div class="col-md-4">
<label class="form-label" for="validationCustomUsername">Username</label>
<div class="input-group has-validation"><span class="input-group-text" id="inputGroupPrepend">@</span>
<input class="form-control" id="validationCustomUsername" type="text" aria-describedby="inputGroupPrepend" required="" />
<div class="invalid-feedback">Please choose a username.</div>
</div>
</div>
<div class="col-md-6">
<label class="form-label" for="validationCustom03">City</label>
<input class="form-control" id="validationCustom03" type="text" required="" />
<div class="invalid-feedback">Please provide a valid city.</div>
</div>
<div class="col-md-3">
<label class="form-label" for="validationCustom04">State</label>
<select class="form-select" id="validationCustom04" required="">
<option selected="" disabled="" value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">Please select a valid state.</div>
</div>
<div class="col-md-3">
<label class="form-label" for="validationCustom05">Zip</label>
<input class="form-control" id="validationCustom05" type="text" required="" />
<div class="invalid-feedback">Please provide a valid zip.</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" id="invalidCheck" type="checkbox" value="" required="" />
<label class="form-check-label mb-0" for="invalidCheck">Agree to terms and conditions</label>
<div class="invalid-feedback mt-0">You must agree before submitting.</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>Tooltips
If your form layout allows it, you can swap the .{valid|invalid}-feedback classes for .{valid|invalid}-tooltip classes to display validation feedback in a styled tooltip. Be sure to have a parent with position: relative on it for tooltip positioning. In the example below, our column classes have this already, but your project may require an alternative setup.
<form class="row g-3 needs-validation" novalidate="">
<div class="col-md-4 position-relative">
<label class="form-label" for="validationTooltip01">First name</label>
<input class="form-control" id="validationTooltip01" type="text" value="Mark" required="" />
<div class="valid-tooltip">Looks good!</div>
</div>
<div class="col-md-4 position-relative">
<label class="form-label" for="validationTooltip02">Last name</label>
<input class="form-control" id="validationTooltip02" type="text" value="Otto" required="" />
<div class="valid-tooltip">Looks good!</div>
</div>
<div class="col-md-4 position-relative">
<label class="form-label" for="validationTooltipUsername">Username</label>
<div class="input-group"><span class="input-group-text" id="validationTooltipUsernamePrepend">@</span>
<input class="form-control" id="validationTooltipUsername" type="text" aria-describedby="validationTooltipUsernamePrepend" required="" />
<div class="invalid-tooltip">Please choose a unique and valid username.</div>
</div>
</div>
<div class="col-md-6 position-relative">
<label class="form-label" for="validationTooltip03">City</label>
<input class="form-control" id="validationTooltip03" type="text" required="" />
<div class="invalid-tooltip">Please provide a valid city.</div>
</div>
<div class="col-md-3 position-relative">
<label class="form-label" for="validationTooltip04">State</label>
<select class="form-select" id="validationTooltip04" required="">
<option selected="" disabled="" value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-tooltip">Please select a valid state.</div>
</div>
<div class="col-md-3 position-relative">
<label class="form-label" for="validationTooltip05">Zip</label>
<input class="form-control" id="validationTooltip05" type="text" required="" />
<div class="invalid-tooltip">Please provide a valid zip.</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
