Bootstrap 5 Forms
BS5 Form Validation
Form Validationn
You may give users insightful feedback by using various validation classes. If you would like to offer validation feedback either before or after the form is submitted, add 8.was-validated or .needs-validation to the <form> element. To show what’s missing from the form, the input fields will have a border that is either red (invalid) or green (valid). A .valid-feedback or .invalid-feedback message can also be added to inform the user of any missing information or actions that must be completed before submitting the form.
Example
In this instance, the .was-validated suffix is used to identify any missing fields prior 8to form submission:
<form action="/action_page.php" class="was-validated">
<div class="mb-3 mt-3">
<label for="uname" class="form-label">Username:</label>
<input type="text" class="form-control" id="uname" placeholder="Enter username" name="uname" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="mb-3">
<label for="pwd" class="form-label">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd" required>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Please fill out this field.</div>
</div>
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="myCheck" name="remember" required>
<label class="form-check-label" for="myCheck">I agree on blabla.</label>
<div class="valid-feedback">Valid.</div>
<div class="invalid-feedback">Check this checkbox to continue.</div>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
