Validation

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

Forms validation on Bootstrap

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

Tooltips

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

Thank you for creating with Phoenix|
2024 ©Themewagon

v1.18.0

Theme Customizer

Explore different styles according to your preferences

Color Scheme
RTL

Change text direction

Support Chat

Toggle support chat

Navigation Type
Vertical Navbar Appearance
Horizontal Navbar Shape
Horizontal Navbar Appearance
Purchase template
customize