Bootstrap Forms Validation

Form validation is an essential part of web development to ensure that user input meets specified criteria before submission. Bootstrap provides built-in styles and JavaScript plugins for form validation, making it easy to implement validation rules and provide feedback to users. Here's how to use Bootstrap's form validation:

1. Basic Form Structure

Start with a basic HTML form structure and include Bootstrap classes for styling:

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" required>
    <div class="invalid-feedback">Please enter a valid email address.</div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

The needs-validation class on the form element indicates that Bootstrap should handle form validation. Each form control should have the required attribute to trigger validation.

2. Feedback Messages

Provide feedback messages for validation errors using the invalid-feedback class:

<div class="form-group">
  <label for="exampleInputPassword1">Password</label>
  <input type="password" class="form-control" id="exampleInputPassword1" required>
  <div class="invalid-feedback">Please enter a password.</div>
</div>

The invalid-feedback element will be displayed when the input fails validation.

3. Custom Feedback

You can also provide custom feedback messages using JavaScript and CSS. Add the is-invalid class to the form control to trigger the custom feedback:

<input type="text" class="form-control is-invalid" id="validationCustom01" required>
<div class="invalid-feedback">Please enter a valid username.</div>

Use JavaScript to toggle the is-invalid class based on validation results.

4. JavaScript Initialization

Initialize Bootstrap's form validation JavaScript plugin by selecting the form element and calling the .validate() method:

document.addEventListener('DOMContentLoaded', function () {
  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);
  });
}, false);

This JavaScript snippet ensures that form validation is triggered on form submission.

5. Additional Features

Bootstrap offers additional features for form validation, such as customizing validation states, handling validation with tooltips, and more. Refer to the Bootstrap documentation for advanced usage.

Conclusion

Bootstrap's form validation functionality makes it easy to create robust and user-friendly forms with client-side validation. By following these guidelines and examples, you can enhance the validation experience for users and improve the overall usability of your web forms.

Archive