Validation states
Validation classes show green or red feedback with messages for valid and invalid fields.
In this page:
Syntax
<form class="needs-validation" novalidate>
<input class="form-control" required>
<div class="invalid-feedback">Error message</div>
</form>
<!-- add .was-validated to the form after checking -->Validation states
Add .needs-validation with novalidate and toggle .was-validated after checking, or apply .is-valid and .is-invalid directly. Feedback messages use .valid-feedback and .invalid-feedback and appear next to the input.
Server-side validation should always back up the client checks.
Note:
Use novalidate and JavaScript to show Bootstrap's styles instead of browser bubbles.
Example: Validation states
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container">
<div class="mb-3"><label for="u1" class="form-label">Username</label>
<input id="u1" class="form-control is-valid" value="ada"><div class="valid-feedback">Looks good!</div></div>
<div class="mb-3"><label for="u2" class="form-label">Email</label>
<input id="u2" class="form-control is-invalid" value="not-an-email"><div class="invalid-feedback">Please enter a valid email.</div></div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Missing feedback text
- Applying validation classes without JS logic
- Relying on client validation only
Chapter Summary
- is-valid and is-invalid style fields
- Feedback divs hold messages
- was-validated styles the whole form
- Always validate on the server too
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: