Bootstrap 5 Form Validation

Form validation is a crucial aspect of web development, ensuring data integrity and improving user experience. Bootstrap 5 makes form validation simple and elegant with built-in classes, JavaScript support, and responsive styling.

In this guide, you’ll learn how to implement, customize, and master form validation in Bootstrap 5.

Why Use Bootstrap 5 for Form Validation?

Bootstrap 5 offers an intuitive way to validate forms using built-in classes. It simplifies adding feedback messages, highlights errors, and supports native HTML validation. Key benefits include:

  • Pre-styled feedback for valid and invalid inputs.
  • Support for client-side validation using HTML5.
  • Flexibility for custom validation rules.

Bootstrap 5 Form Validation Basics

Bootstrap’s validation is built on top of native HTML5 form validation. When submitting a form, invalid fields are highlighted automatically.

Example: Basic Validation

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="email" class="form-label">Email address</label>
    <input type="email" class="form-control" id="email" required>
    <div class="invalid-feedback">
      Please provide a valid email address.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

How It Works:

  1. needs-validation: A class to activate Bootstrap’s validation styles.
  2. novalidate: Disables native browser validation to rely on Bootstrap styling.
  3. invalid-feedback: Displays error messages when validation fails.

Valid and Invalid States

Bootstrap uses specific classes to style valid and invalid fields:

  • is-valid: Applies green borders and valid feedback.
  • is-invalid: Applies red borders and error feedback.

Example:

<div class="mb-3">
  <input type="text" class="form-control is-valid" id="validInput" value="John Doe">
  <div class="valid-feedback">
    Looks good!
  </div>
</div>
<div class="mb-3">
  <input type="text" class="form-control is-invalid" id="invalidInput" required>
  <div class="invalid-feedback">
    This field is required.
  </div>
</div>

Customizing Validation Feedback

You can tailor feedback messages for your specific needs. Add custom messages inside the valid-feedback or invalid-feedback divs.

Example:

<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="invalid-feedback">
      Please choose a username.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>

JavaScript for Form Validation

Bootstrap 5 allows you to enhance validation with JavaScript. Use JavaScript to check form validity before submission.

Example:

<script>
  // JavaScript for Bootstrap validation
  (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>

Explanation:

  1. checkValidity(): Checks whether the form is valid.
  2. was-validated: Applies validation styles after submission.

Validation with Different Input Types

1. Text Fields

Use the required attribute for mandatory text fields.

<input type="text" class="form-control" required>

2. Email Fields

Ensure proper email format validation using the type="email" attribute.

<input type="email" class="form-control" required>

3. Password Fields

Validate passwords with custom error messages.

<input type="password" class="form-control" required>
<div class="invalid-feedback">Password is required.</div>

4. Select Dropdowns

<select class="form-select" required>
  <option value="">Choose an option</option>
  <option value="1">Option 1</option>
</select>
<div class="invalid-feedback">
  Please select an option.
</div>

Bootstrap 5 Server-Side Validation

For server-side validation, Bootstrap uses the same is-valid and is-invalid classes. Add these classes dynamically based on server-side responses.

Example:

<input type="text" class="form-control is-invalid" id="serverInput">
<div class="invalid-feedback">
  This username is already taken.
</div>

Validation in Inline Forms

Bootstrap 5 validation works seamlessly in inline forms. Just add needs-validation to the form element.

Example:

<form class="row g-3 needs-validation" novalidate>
  <div class="col-auto">
    <input type="text" class="form-control" placeholder="Username" required>
    <div class="invalid-feedback">Required field.</div>
  </div>
  <div class="col-auto">
    <button class="btn btn-primary" type="submit">Submit</button>
  </div>
</form>

Responsive Form Validation

Bootstrap’s responsive grid system ensures validation works perfectly on any device.

Example:

<form class="row g-3 needs-validation" novalidate>
  <div class="col-md-6">
    <label for="firstName" class="form-label">First Name</label>
    <input type="text" class="form-control" id="firstName" required>
    <div class="invalid-feedback">
      Please provide your first name.
    </div>
  </div>
  <div class="col-md-6">
    <label for="lastName" class="form-label">Last Name</label>
    <input type="text" class="form-control" id="lastName" required>
    <div class="invalid-feedback">
      Please provide your last name.
    </div>
  </div>
  <button class="btn btn-primary mt-3" type="submit">Submit</button>
</form>

Dark Mode Form Validation

Bootstrap 5 supports dark mode styling for validation using bg-dark and text-light classes.

Example:

<form class="needs-validation bg-dark text-light p-3" novalidate>
  <div class="mb-3">
    <label for="darkEmail" class="form-label">Email</label>
    <input type="email" class="form-control bg-dark text-light" id="darkEmail" required>
    <div class="invalid-feedback">
      Please enter a valid email address.
    </div>
  </div>
  <button class="btn btn-light" type="submit">Submit</button>
</form>

Best Practices for Form Validation

  1. Accessible Labels: Use aria-label or aria-describedby for accessibility.
  2. Clear Feedback: Provide concise and meaningful feedback messages.
  3. Avoid Over-validation: Validate only necessary fields to improve UX.
  4. Test Responsiveness: Ensure validation works on all screen sizes.

FAQs About Bootstrap 5 Form Validation

1. Can I use Bootstrap validation without JavaScript?

Yes, Bootstrap validation works with HTML5 validation. However, JavaScript is needed for dynamic behaviors.

2. How do I add custom validation rules?

Use JavaScript to define custom rules and apply is-valid or is-invalid classes programmatically.

3. Does Bootstrap 5 validation work on older browsers?

Bootstrap 5 validation relies on modern HTML5 features and works best on modern browsers.

Conclusion

Bootstrap 5 form validation simplifies the process of creating user-friendly and visually appealing forms. Whether you’re using native HTML5 validation or enhancing it with JavaScript, Bootstrap 5 provides a robust solution to handle form validation efficiently.

Leave a Comment