BootstrapHow-ToBeginner · 4 min read

How to Validate Form in Bootstrap: Simple Guide with Examples

To validate a form in Bootstrap, add the needs-validation class to your <form> and use novalidate to disable default browser validation. Then, use Bootstrap's validation classes like is-valid and is-invalid with JavaScript to show feedback messages when users submit the form.

📐

Syntax

Bootstrap form validation uses these key parts:

<form class="needs-validation" novalidate>: Marks the form for Bootstrap validation and disables default browser validation.
required attribute on inputs: Makes fields mandatory.
<div class="valid-feedback"> and <div class="invalid-feedback">: Containers for success or error messages.
JavaScript code: Checks form validity on submit and toggles validation classes.

html

<form class="needs-validation" novalidate>
  <input type="text" class="form-control" required>
  <div class="valid-feedback">Looks good!</div>
  <div class="invalid-feedback">Please fill out this field.</div>
  <button type="submit">Submit</button>
</form>

💻

Example

This example shows a simple form with one required input. When you try to submit empty, it shows an error message. If filled, it shows success.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Form Validation Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <form class="needs-validation" novalidate>
      <div class="mb-3">
        <label for="username" class="form-label">Username</label>
        <input type="text" class="form-control" id="username" required>
        <div class="valid-feedback">Looks good!</div>
        <div class="invalid-feedback">Please enter your username.</div>
      </div>
      <button class="btn btn-primary" type="submit">Submit</button>
    </form>
  </div>

  <script>
    (() => {
      'use strict'
      const forms = document.querySelectorAll('.needs-validation')
      Array.from(forms).forEach(form => {
        form.addEventListener('submit', event => {
          if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
          }
          form.classList.add('was-validated')
        }, false)
      })
    })()
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A form with a username input and submit button. If submitted empty, the input border turns red and shows 'Please enter your username.' If filled, the border turns green and shows 'Looks good!'

⚠️

Common Pitfalls

Not adding novalidate on the form causes default browser validation popups, which can confuse users.
Forgetting to add required or other validation attributes means Bootstrap won't know which fields to check.
Not running JavaScript to add was-validated class means validation styles won't show.
Using invalid feedback elements outside the form group can break layout.

html

<!-- Wrong: Missing novalidate and JS -->
<form class="needs-validation">
  <input type="text" required>
  <div class="invalid-feedback">Error</div>
  <button type="submit">Submit</button>
</form>

<!-- Right: Added novalidate and JS -->
<form class="needs-validation" novalidate>
  <input type="text" required>
  <div class="invalid-feedback">Error</div>
  <button type="submit">Submit</button>
</form>
<script>
  const form = document.querySelector('.needs-validation');
  form.addEventListener('submit', e => {
    if (!form.checkValidity()) {
      e.preventDefault();
      e.stopPropagation();
    }
    form.classList.add('was-validated');
  });
</script>

📊

Quick Reference

Remember these key points for Bootstrap form validation:

Add needs-validation and novalidate to your form.
Use HTML5 validation attributes like required, type="email", etc.
Include valid-feedback and invalid-feedback elements for messages.
Use JavaScript to check validity and add was-validated class on submit.
Bootstrap styles inputs with green/red borders based on validation state.

✅

Key Takeaways

Add class 'needs-validation' and attribute 'novalidate' to your form to enable Bootstrap validation.

Use HTML5 validation attributes like 'required' on inputs to specify rules.

Run JavaScript on form submit to check validity and add 'was-validated' class for styling.

Place 'valid-feedback' and 'invalid-feedback' elements inside form groups for user messages.

Bootstrap automatically styles inputs with green or red borders based on validation state.