❮ Bootstrap5 Progressbars Bootstrap5 Flex ❯

Bootstrap 5 Form Validation

We can use different validation classes to set up form validation functionality.

Adding .was-validated or .needs-validation to the <form> element will give the input fields a green (valid) or red (invalid) border effect, indicating whether the form needs input.

The .valid-feedback or .invalid-feedback classes are used to inform users what information is missing or what needs to be completed before submitting the form.

Example

Using the .was-validated class to show what needs to be filled in before submitting the form:

<form action="" class="was-validated">
  <div class="form-group">
    <label for="uname">Username:</label>
    &lt;input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">Validation successful!</div>
    <div class="invalid-feedback">Please enter a username!</div>
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    &lt;input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
    <div class="valid-feedback">Validation successful!</div>
    <div class="invalid-feedback">Please enter a password!</div>
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      &lt;input class="form-check-input" type="checkbox" name="remember" required> Agree to terms
      <div class="valid-feedback">Validation successful!</div>
      <div class="invalid-feedback">You must agree to the terms to submit.</div>
    </label>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

Example

Using .needs-validation, which will validate the missing content after the form is submitted. Some JavaScript code needs to be added for this to work:

&lt;form action="" class="needs-validation" novalidate>
  <div class="form-group">
    <label for="uname">Username:</label>
    &lt;input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
    <div class="valid-feedback">Validation successful!</div>
    <div class="invalid-feedback">Please enter a username!</div>
  </div>
  <div class="form-group">
    <label for="pwd">Password:</label>
    &lt;input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
    <div class="valid-feedback">Validation successful!</div>
    <div class="invalid-feedback">Please enter a password!</div>
  </div>
  <div class="form-group form-check">
    <label class="form-check-label">
      &lt;input class="form-check-input" type="checkbox" name="remember" required> Agree to terms

<div class="valid-feedback">Validation successful!</div>
<div class="invalid-feedback">You must agree to the terms to submit.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>

<script>
// Prevent form submission if validation fails
(function() {
  'use strict';
  window.addEventListener('load', function() {
    // Get form validation styles
    var forms = document.getElementsByClassName('needs-validation');
    // Loop and prevent submission
    var validation = Array.prototype.filter.call(forms, function(form) {
      form.addEventListener('submit', function(event) {
        if (form.checkValidity() === false) {
          event.preventDefault();
          event.stopPropagation();
        }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
</script>

❮ Bootstrap5 Progressbars Bootstrap5 Flex ❯