### 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 `select`s are only available with `.form-select`, and not `.form-control`.

##### Custom styles Example

First name
Looks good!
Last name
Looks good!
Username
@
Please choose a username.
City
Please provide a valid city.
State
Please select a valid state.
Zip
Please provide a valid zip.
Agree to terms and conditions
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.

First name
Looks good!
Last name
Looks good!
Username
@
Please choose a unique and valid username.
City
Please provide a valid city.
State
Please select a valid state.
Zip
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>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### 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