Validation

Provide valuable, actionable feedback to your users with HTML5 form validation–available in all supported browsers.

Overview

boodoo leverages the HTML5 validation API: when a form is submitted with invalid values, the valid/invalid classes can be applied and feedback shown. Nest .is-valid/.is-invalid classes or rely on the was-validated class on the form after a submit attempt.

Custom styles

For custom form validation messages, you'll need to add the novalidate attribute to your <form> to disable browser default feedback.

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-4">
    <label for="fn" class="form-label">First name</label>
    <input type="text" class="form-control" id="fn" required>
    <div class="valid-feedback">Looks good!</div>
    <div class="invalid-feedback">Please provide a first name.</div>
  </div>
  <div class="col-12">
    <button class="btn btn-primary" type="submit">Submit form</button>
  </div>
</form>

<script>
  document.getElementById('myForm').addEventListener('submit', function (e) {
    e.preventDefault();
    this.classList.add('was-validated');
  });
</script>

Validated tooltips

If your form layout allows it, swap the .form-text-style feedback for .valid-tooltip/.invalid-tooltip positioned absolutely:

<div class="position-relative">
  <input type="text" class="form-control is-invalid">
  <div class="invalid-tooltip">Invalid tooltip feedback</div>
</div>

Server-side

boodoo also supports server-side rendered validation by adding .is-invalid or .is-valid classes to the form controls directly (no was-validated needed).