Validation

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

Validation on Bootstrap
Custom 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
Looks good!
Looks good!
@
Please choose a username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
You must agree before submitting.
<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.

Looks good!
Looks good!
@
Please choose a unique and valid username.
Please provide a valid city.
Please select a valid state.
Please provide a valid zip.
<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>

Thank you for creating with Falcon |
2023 © Themewagon

v3.17.0

Settings

Set your own customized style

Color Scheme

Choose the perfect color mode for your app.


RTL Mode

Switch your language direction

RTL Documentation

Fluid Layout

Toggle container layout system

Fluid Documentation

Navigation Position

Select a suitable navigation system for your web application


Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize