Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to add form validation with Bootstrap 5.
Browser Defaults
We can use the browser default form validation.
For example, we can write:
<form class="row g-3">
<div class="col-md-4">
<label for="first-name" class="form-label">First name</label>
<input type="text" class="form-control" id="first-name" value="james" required>
</div>
<div class="col-md-4">
<label for="last-name" class="form-label">Last name</label>
<input type="text" class="form-control" id="last-name" value="smith" required>
</div>
<div class="col-md-4">
<label for="username" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control" id="username" required>
</div>
</div>
<div class="col-md-6">
<label for="city" class="form-label">City</label>
<input type="text" class="form-control" id="city" required>
</div>
<div class="col-md-3">
<label for="region" class="form-label">Region</label>
<select class="form-select" id="region" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
</div>
<div class="col-md-3">
<label for="postal-code" class="form-label">Postal Code</label>
<input type="text" class="form-control" id="postal-code" required>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="agree" required>
<label class="form-check-label" for="agree">
I agree
</label>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Sign up</button>
</div>
</form>
We add the fields with the require attribute to add checks for the form validation.
Since we don’t have the novalidate attribute on the form itself, browser validation will be used.
Validation Classes
The .is-invalid , .is-valid , .valid-feedback and .invalid-feedback classes can be applied to form fields to show different styles and messages to users to indicate validity.
For example, we can write:
<form class="row g-3">
<div class="col-md-4">
<label for="first-name" class="form-label">First name</label>
<input type="text" class="form-control is-valid" id="first-name" value="james" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="last-name" class="form-label">Last name</label>
<input type="text" class="form-control is-valid" id="last-name" value="smith" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="username" class="form-label">Username</label>
<div class="input-group">
<span class="input-group-text">@</span>
<input type="text" class="form-control is-invalid" id="username" required>
<div class="invalid-feedback">
Username is required.
</div>
</div>
</div>
<div class="col-md-6">
<label for="city" class="form-label">City</label>
<input type="text" class="form-control is-invalid" id="city" required>
<div class="invalid-feedback">
City is requird
</div>
</div>
<div class="col-md-3">
<label for="region" class="form-label">Region</label>
<select class="form-select is-invalid" id="region" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
<div class="invalid-feedback">
Region is required
</div>
</div>
<div class="col-md-3">
<label for="postal-code" class="form-label">Postal Code</label>
<input type="text" class="form-control is-invalid" id="postal-code" required>
<div class="invalid-feedback">
Postal code is required
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input is-invalid" type="checkbox" value="" id="agree" required>
<label class="form-check-label" for="agree">
I agree
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Sign up</button>
</div>
</form>
to add form validation styles.
We have the invalid-feedback class to display a message if the field isn’t valid.
The valid-feedback class is used to display a message for valid fields.
The is-valid class is used on inputs to indicate that they’re valid.
is-invalid is used to display fields that are invalid.
Supported Elements
Validation styles can be added to inputs, textareas with the form-control class.
Select elements with the .form-select class can also have validation styles applied.
.form-check s and .form-file can also have the styles applied.
For example, we can write:
<form class="was-validated">
<div class="mb-3">
<label for="textarea" class="form-label">Textarea</label>
<textarea class="form-control is-invalid" id="textarea" placeholder="Required example textarea" required></textarea>
<div class="invalid-feedback">
text is required
</div>
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="checkbox" required>
<label class="form-check-label" for="checkbox">agree</label>
<div class="invalid-feedback">invalid checkbox</div>
</div>
<div class="form-check">
<input type="radio" class="form-check-input" id="apple" name="radio-stacked" required>
<label class="form-check-label" for="radio">apple</label>
</div>
<div class="form-check mb-3">
<input type="radio" class="form-check-input" id="orange" name="radio-stacked" required>
<label class="form-check-label" for="orange">orange</label>
<div class="invalid-feedback">More example invalid feedback text</div>
</div>
<div class="mb-3">
<select class="form-select" required>
<option value="">Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">invalid select</div>
</div>
<div class="form-file mb-3">
<input type="file" class="form-file-input" id="file" required>
<label class="form-file-label" for="file">
<span class="form-file-text">Choose file...</span>
<span class="form-file-button">Browse</span>
</label>
<div class="invalid-feedback">invalid file</div>
</div>
<div class="mb-3">
<button class="btn btn-primary" type="submit" disabled>Submit</button>
</div>
</form>
The was-validated is applied to the form.
Then we add the is-invalid and invalid-feedback classes to the fields and messages.
Everything will be red.
Inputs and textareas will have the exclamation mark.
Conclusion
We can add validation styles with various classes provided by Bootstrap 5.