How to use form validation in Bootstrap 5

Form validation is a process of checking the user input data against a set of rules and providing feedback to the user. Bootstrap 5 provides some built-in classes and attributes to help you create and customize form validation styles and messages. In this blog post, I will show you how to use form validation in bootstrap 5 with some examples.

Basic form validation

To enable basic form validation, you need to add the novalidate attribute to your <form> element. This will disable the browser default validation tooltips and allow you to use the Bootstrap validation styles and APIs. You also need to add the required attribute to any input field that you want to validate. For example:

<form novalidate>

  <div class="mb-3">

    <label for="email" class="form-label">Email address</label>

    <input type="email" class="form-control" id="email" placeholder="name@example.com" required>

  </div>

  <div class="mb-3">

    <label for="password" class="form-label">Password</label>

    <input type="password" class="form-control" id="password" placeholder="Enter password" required>

  </div>

  <button type="submit" class="btn btn-primary">Submit</button>

</form>

Custom form validation

If you want to use custom validation rules or messages, you can use the JavaScript constraint validation API. This API allows you to access the validity state of the input fields and set custom validity messages using the setCustomValidity() method. For example, if you want to check the length of the password and display a different message depending on the length, you can use the following code:

// Get the form element
var form = document.querySelector("form");

// Get the password input element
var password = document.getElementById("password");

// Add an input event listener to the password element
password.addEventListener("input", function() {
  // Check the length of the password value
  if (password.value.length < 8) {
    // Set a custom invalid message
    password.setCustomValidity("Password must be at least 8 characters long.");
  } else if (password.value.length > 20) {
    // Set another custom invalid message
    password.setCustomValidity("Password must be no more than 20 characters long.");
  } else {
    // Set an empty message to make the field valid
    password.setCustomValidity("");
  }
});

// Add a submit event listener to the form element
form.addEventListener("submit", function(event) {
  // Check the validity of the form
  if (!form.checkValidity()) {
    // Prevent the default form submission
    event.preventDefault();
    // Trigger the validation of the form
    form.classList.add("was-validated");
  }
});

Note that you need to add the .was-validated class to the form element after checking the validity of the form. This will apply the Bootstrap validation styles to the input fields and display the feedback messages.

Conclusion

Form validation is an important feature for any web application that collects user input data. Bootstrap 5 makes it easy to create and customize form validation styles and messages with some built-in classes and attributes. You can also use the JavaScript constraint validation API to implement custom validation rules and messages. I hope this blog post helped you understand how to use form validation in bootstrap 5. For more information and examples, you can check out the official documentation. Happy coding! 😊