Bootstrap - Validation

Validation Classes

Bootstrap has two validation classes that can be used on forms to add validation styles and feedback:

1. .was-validated: This class shows that the form has been validated. When added to a <form> element, it will apply validation styles to all form controls within the form based on their validation state. The .was-validated class is usually added after the form has been submitted and validated.

2. .needs-validation: This class shows that the form needs validation. When added to a <form> element, it will stop the form from being submitted if any of the form controls are invalid. The .needs-validation class is usually added to the form at the start, before any validation has happened.

To use these validation classes on a form, add the class to the <form> element.

<form class="needs-validation" novalidate>
  <!-- Form controls go here -->
</form>

In the example above, the .needs-validation class is added to the form, showing that it needs validation. The novalidate attribute is also added to turn off the browser's default validation, letting Bootstrap's validation styles and feedback be used instead.

When the form is submitted, you can use JavaScript to add the .was-validated class to the form, which will add the validation styles based on the validation state of each form control.

const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
  if (!form.checkValidity()) {
    event.preventDefault();
    event.stopPropagation();
  }
  form.classList.add('was-validated');
});

In this JavaScript code, the form's submit event is watched for. If the form is not valid (!form.checkValidity()), the form submission is stopped using event.preventDefault() and event.stopPropagation(). Then, the .was-validated class is added to the form using form.classList.add('was-validated'), which adds the validation styles.

By using these validation classes, you can add Bootstrap's validation styles and feedback to your forms, giving users a way to check their input and fill out forms correctly.

Validation Styles

Bootstrap gives you default validation styles for form controls, which are used when using the validation classes. These styles give visual feedback to users about the validation state of form inputs.

The default validation styles in Bootstrap are:

These styles are automatically used when the .was-validated class is added to the <form> element or when the novalidate attribute is present on the <form> element and the form is submitted.

While the default validation styles are good for many uses, you may want to change them to fit your application's design. Bootstrap lets you do this with CSS.

To change the validation styles, you can use CSS to target the form controls with the .is-valid and .is-invalid classes, which are added by Bootstrap based on the validation state.

.form-control.is-valid,
.was-validated .form-control:valid {
  border-color: #2ecc71; /* Change the border color */
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  box-shadow: 0 0 0 0.2rem rgba(46, 204, 113, 0.25); /* Change the focus shadow color */
}

.form-control.is-valid ~ .valid-feedback,
.form-control.is-valid ~ .valid-tooltip,
.was-validated .form-control:valid ~ .valid-feedback,
.was-validated .form-control:valid ~ .valid-tooltip {
  display: block;
  color: #2ecc71; /* Change the validation message color */
}

Similarly, you can change the styles for invalid inputs:

.form-control.is-invalid,
.was-validated .form-control:invalid {
  border-color: #e74c3c; /* Change the border color */
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
  box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25); /* Change the focus shadow color */
}

.form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip,
.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip {
  display: block;
  color: #e74c3c; /* Change the validation message color */
}

By changing the CSS for the validation classes, you can change how the validation styles look, while keeping the functions provided by Bootstrap. This lets you have a validation experience that is both good for users and matches your application's style.

Validation States

Bootstrap has classes for showing feedback messages to users based on the validation state of form controls. These feedback messages give users more information about why a form control is valid or invalid, helping them fill out the form correctly.

<div class="form-group">
  <label for="inputEmail">Email</label>
  <input type="email" class="form-control" id="inputEmail" required>
  <div class="valid-feedback">
    Looks good!
  </div>
</div>

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

Validation Methods

Bootstrap supports two methods for validating forms: built-in HTML5 validation and custom Bootstrap validation.

<div class="form-group">
  <label for="inputEmail">Email</label>
  <input type="email" class="form-control" id="inputEmail" required>
  <div class="invalid-feedback">
    Please provide a valid email address.
  </div>
</div>

<form novalidate>
  <!-- Form controls go here -->
</form>

<div class="form-group">
  <label for="inputPhone">Phone Number</label>
  <input type="text" class="form-control" id="inputPhone" required>
  <div class="invalid-feedback">
    Please provide a valid phone number (10 digits).
  </div>
</div>

const form = document.querySelector('form');
const phoneInput = document.getElementById('inputPhone');

phoneInput.addEventListener('input', function () {
  if (this.value.length === 10) {
    this.setCustomValidity('');
  } else {
    this.setCustomValidity('Phone number must be 10 digits.');
  }
});

form.addEventListener('submit', function (event) {
  if (!form.checkValidity()) {
    event.preventDefault();
    event.stopPropagation();
  }
  form.classList.add('was-validated');
});

Server-side Validation

While client-side validation with HTML5 and JavaScript is important for giving users quick feedback and checking input is in the right format, it's also essential to add server-side validation to your forms.

Server-side validation is the process of checking user input on the server after the form has been submitted. This is important because client-side validation can be turned off or tricked by users, so you can't trust it completely. Server-side validation acts as a second line of defense, making sure that the data you get is valid and safe before it's stored or used.

Here are some reasons why server-side validation is important:

When using Bootstrap for form validation, you can add server-side validation in a few ways:

1. Ajax validation: Before the form is submitted, you can use Ajax to send form data to the server for validation. If the server returns any validation errors, you can show them to the user using Bootstrap's validation classes and feedback elements.

2. Post-submission validation: After the form is submitted, you can check the form data on the server. If there are any validation errors, you can send the user back to the form page with the errors shown using Bootstrap's validation classes and feedback elements.

3. Hybrid approach: You can use a mix of client-side and server-side validation, using client-side validation to give users quick feedback and catch common errors, and server-side validation to do a final check and handle more complex validation rules.

<!-- Form submitted with server-side validation errors -->
<form class="was-validated">
  <div class="form-group">
    <label for="inputEmail">Email</label>
    <input type="email" class="form-control is-invalid" id="inputEmail" required>
    <div class="invalid-feedback">
      Please provide a valid email address.
    </div>
  </div>
  <div class="form-group">
    <label for="inputPassword">Password</label>
    <input type="password" class="form-control is-invalid" id="inputPassword" 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>

By adding server-side validation to your Bootstrap forms, you can make sure that the data you receive is valid, secure, and follows your application's rules. This helps protect your application and database, and gives users clear feedback if there are any issues with their form submission.

Validation Examples

Bootstrap validation is a way to make sure user input is correct and follows the format you expect. Let's look at some examples of how to use Bootstrap validation in different situations.

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="inputName">Name</label>
    <input type="text" class="form-control" id="inputName" required>
    <div class="valid-feedback">
      Looks good!
    </div>
    <div class="invalid-feedback">
      Please provide your name.
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail">Email</label>
    <input type="email" class="form-control" id="inputEmail" required>
    <div class="valid-feedback">
      Looks good!
    </div>
    <div class="invalid-feedback">
      Please provide a valid email address.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="inputText">Text Input</label>
    <input type="text" class="form-control" id="inputText" required>
    <div class="invalid-feedback">
      Please fill out this field.
    </div>
  </div>
  <div class="form-group">
    <label for="inputEmail">Email Input</label>
    <input type="email" class="form-control" id="inputEmail" required>
    <div class="invalid-feedback">
      Please provide a valid email address.
    </div>
  </div>
  <div class="form-group">
    <label for="inputNumber">Number Input</label>
    <input type="number" class="form-control" id="inputNumber" min="1" max="10" required>
    <div class="invalid-feedback">
      Please provide a number between 1 and 10.
    </div>
  </div>
  <div class="form-group">
    <label for="inputDate">Date Input</label>
    <input type="date" class="form-control" id="inputDate" required>
    <div class="invalid-feedback">
      Please select a date.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

<form class="needs-validation" novalidate>
  <div class="form-group">
    <label for="inputPassword">Password</label>
    <input type="password" class="form-control" id="inputPassword" required>
    <div class="invalid-feedback">
      Password must be at least 8 characters long and contain at least one number and one uppercase letter.
    </div>
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

const form = document.querySelector('form');
const passwordInput = document.getElementById('inputPassword');

const validatePassword = (password) => {
  const regex = /^(?=.*\d)(?=.*[A-Z])[0-9a-zA-Z]{8,}$/;
  return regex.test(password);
};

passwordInput.addEventListener('input', function () {
  if (validatePassword(this.value)) {
    this.setCustomValidity('');
  } else {
    this.setCustomValidity('Password must be at least 8 characters long and contain at least one number and one uppercase letter.');
  }
});

form.addEventListener('submit', function (event) {
  if (!form.checkValidity()) {
    event.preventDefault();
    event.stopPropagation();
  }
  form.classList.add('was-validated');
});