Bootstrap 5.3 Form Validation 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap 5.3 Form Validation</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <h2>Bootstrap 5.3 Form Validation</h2>

    <form class="needs-validation" novalidate>
      <div class="mb-3">
        <label for="name" class="form-label">Name</label>
        <input type="text" class="form-control" id="name" required>
        <div class="invalid-feedback">
          Please provide a valid name.
        </div>
      </div>
      <div class="mb-3">
        <label for="email" class="form-label">Email</label>
        <input type="email" class="form-control" id="email" required>
        <div class="invalid-feedback">
          Please provide a valid email address.
        </div>
      </div>
      <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" id="password" minlength="8" required>
        <div class="invalid-feedback">
          Password must be at least 8 characters long.
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
  <script>
    // Enable form 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>
</body>
</html>

Code Output

Bootstrap 5.3 Form Validation

Bootstrap 5.3 Form Validation

Please provide a valid name.
Please provide a valid email address.
Password must be at least 8 characters long.

Form Validation

You can easily implement form validation to enhance the user experience and ensure that user inputs meet certain criteria. Bootstrap provides built-in classes and JavaScript functionality for form validation.

    • HTML Structure: Start by creating the HTML structure for your form, including the necessary form controls and labels. Add the novalidate attribute to the <form> element to disable the browser’s default validation.

    • Validation Classes: Bootstrap provides several classes to apply validation styles to form controls: .is-valid: Applied to valid form controls. .is-invalid: Applied to invalid form controls.

    • Validation Feedback: Use the invalid-feedback class to display an error message for invalid form controls. This class should be applied to a <div> element positioned immediately after the invalid form control.
    • Custom Validation: This allows you to create custom validation styles and error messages for specific form controls. Add the data-bs-<validation-type>-message attribute to the form control to specify the error message to display for a particular validation type.
    • JavaScript Validation: Bootstrap provides a JavaScript plugin for form validation. You can enable it by including the Bootstrap JavaScript file (bootstrap.min.js) and initializing the form validation plugin using JavaScript code.