Bootstrap5 Form Validation
We can use different validation classes to set up form validation functionality.
.was-validatedor.needs-validationAdded to the <form> element, input fields will have a green (valid) or red (invalid) border effect to indicate whether the form requires input.
.valid-feedbackor.invalid-feedbackThe classes are used to tell users what information is missing, or what needs to be completed before submitting the form.
Example
Use the .was-validated class to show what needs to be filled in before the form is submitted:
<form action="" class="was-validated">
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Verification successful!</div>
<div class="invalid-feedback">Please enter a username!</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Verification successful!</div>
<div class="invalid-feedback">Please enter password!</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required>Accept Agreement<div class="valid-feedback">Verification successful!</div>
<div class="invalid-feedback">You must agree to the terms before submitting.</div>
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
Try it Yourself »
Example
Use .needs-validation, which will validate missing content after the form is submitted. Some JavaScript code needs to be added here to make the code work properly:
<form action="" class="needs-validation" novalidate>
<div class="form-group">
<label for="uname">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Verification successful!</div>
<div class="invalid-feedback">Please enter a username!</div>
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Verification successful!</div>
<div class="invalid-feedback">Please enter password!</div>
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember" required>Accept Agreement<div class="valid-feedback">Verification successful!</div>
<div class="invalid-feedback">You must agree to the terms before submitting.</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 all forms with the validation class
var forms = document.getElementsByClassName('needs-validation');
// Loop over them 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>
Try it Yourself »