Tutorials Bootstrap 5 Tutorial
Form Validation Classes
Form Validation Classes: free step-by-step lesson with examples, common mistakes, and interview tips — part of Bootstrap 5 Tutorial on Toolliyo Academy.
On this page
Bootstrap 5 Tutorial · Lesson 38 of 100
Form Validation Classes
Setup & Utilities ✓ → Components & Forms → Theme & Integrate → Ship & Projects
Components & Forms · 2 — UI · ~6 min · Navigation and Forms
What is this?
Bootstrap validation styles use .was-validated or .is-valid / .is-invalid with feedback text.
Why should you care?
Login and settings forms need visible errors without custom CSS.
See it live — copy this example
Examples include Bootstrap 5.3 CDN links. Paste into an HTML file or use Run Example to preview.
<!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/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<title>BootVerse</title>
</head>
<body class="p-3">
<form class="was-validated" novalidate style="max-width:420px">
<div class="mb-3">
<label class="form-label" for="email">Email</label>
<input class="form-control" type="email" id="email" required>
<div class="invalid-feedback">Enter a valid email.</div>
</div>
<button class="btn btn-primary" type="submit">Continue</button>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- required + type=email enable browser checks.
- was-validated shows feedback after attempt.
- novalidate lets you style Bootstrap’s look.
Practice next
- Submit empty and watch invalid-feedback.
- Add a password field.
- Try is-invalid manually.
- Add valid-feedback for success.
- Use input-group with validation.
Remember
Feedback text matters. was-validated triggers styles. Always label inputs.
Login form
Bad emails must fail clearly.
Outcome: User sees why submit failed.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!