Form Validation

The validation of a form is the process to see if the data entered in it is fine before it is sent to a server. In bootstrap it is realized with a combination of CSS classes and a tiny bit of JavaScript to “fire” the “check”.

This is essentially the working of the mechanism, steps are as follows.

1. The Core Logic: Browser vs. Bootstrap

We have built-in validation in the browsers (the little gray bubbles in modern browsers that say “Please fill out this field”). Bootstrap hides those and puts in pretty styles.

You do this by adding the novalidate attribute to your tags. This tells the browser: “Don‘t do your default thing; I‘ve got this.”

2. Setting Up the HTML

Bootstrap uses specific classes to show success or failure:

.is-valid: Turns the border green and adds a checkmark.
.is-invalid: Turns the border red and adds an exclamation mark.

However, you don’t usually type those manually. Instead, you add the required attribute to your inputs, and Bootstrap’s CSS will style them automatically once the form is “submitted.”

3. Feedback Messages

You can tell the user exactly what went wrong or right using these two classes:

.valid-feedback: Text that appears only when the input is correct.
.invalid-feedback: Text that appears only when the input is wrong.

4. The “Magic” JavaScript

It doesn’t know how to prevent a form being submitted if it‘s empty. So you need a little script to test the validity. When the Submit button is pressed, the script tests to see if the inputs match the criteria (e.g. ‘required’):

If they are valid, the script adds the class .was-validated to the parent <form>. Once that class is added, all the green/red colors and feedback messages instantly appear.

A Simple Example

HTML

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="name" class="form-label">Full Name</label>
    <input type="text" class="form-control" id="name" required>
    <div class="invalid-feedback">
      Please enter your name.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit Form</button>
</form>

<script>
// This is the standard Bootstrap starter script
(function () {
  'use strict'
  var forms = document.querySelectorAll('.needs-validation')
  Array.prototype.slice.call(forms).forEach(function (form) {
    form.addEventListener('submit', function (event) {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
      }
      form.classList.add('was-validated')
    }, false)
  })
})()
</script>

Summary Table

Feature	Class/Attribute	What it does
Trigger	`required`	Tells the browser the field cannot be empty.
Status	`.was-validated`	Added to the form via JS to show all colors/icons.
Success	`.valid-feedback`	Displays a “Looks good!” style message.
Error	`.invalid-feedback`	Displays an “Error!” style message.
Tooltips	`.invalid-tooltip`	Shows the error in a floating bubble instead of text.