Bootstrap Form Validation

Provide instant feedback on form submissions with .was-validated classes.

Bootstrap provides custom feedback styles for HTML5 form validation. Add needs-validation to your form and .valid-feedback or .invalid-feedback to input wrappers.

Key Takeaways: Bootstrap Form Validation

Mastering Bootstrap Form Validation helps you write clean and reliable Bootstrap code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

Bootstrap Form Validation Code Example

Bootstrap
<form class="needs-validation was-validated">
  <label for="uname" class="form-label">Username:</label>
  <input type="text" class="form-control" id="uname" required value="codesin">
  <div class="valid-feedback">Looks good!</div>
</form>
Output
Displays green success outline and valid message
Free sign-in required · Google login available
Finished this lesson?
Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services