0
0
Bootsrapmarkup~5 mins

Form validation styles in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Form validation styles help users see if their input is correct or needs fixing. This makes forms easier and faster to use.

When you want to show if a user typed a valid email address.
When you want to highlight required fields that are empty.
When you want to give instant feedback on password strength.
When you want to mark fields with errors before form submission.
When you want to confirm successful input with a green check.
Syntax
Bootsrap
<input class="form-control is-valid" />
<input class="form-control is-invalid" />

Use is-valid class to show valid input with green border and icon.

Use is-invalid class to show invalid input with red border and icon.

Examples
This input box shows a green border and check icon to indicate valid input.
Bootsrap
<input type="text" class="form-control is-valid" placeholder="Valid input">
This input box shows a red border and cross icon to indicate invalid email.
Bootsrap
<input type="email" class="form-control is-invalid" placeholder="Invalid email">
This message appears below a valid input to confirm success.
Bootsrap
<div class="valid-feedback">Looks good!</div>
This message appears below an invalid input to explain the error.
Bootsrap
<div class="invalid-feedback">Please enter a valid value.</div>
Sample Program

This example shows a form with two inputs. The username input is marked valid with a green border and message. The email input is marked invalid with a red border and error message. This helps users quickly see which fields need attention.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Form Validation Styles</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <main class="container mt-5">
    <h1>Form Validation Styles Example</h1>
    <form>
      <div class="mb-3">
        <label for="username" class="form-label">Username (valid)</label>
        <input type="text" class="form-control is-valid" id="username" value="user123" aria-describedby="usernameFeedback" />
        <div id="usernameFeedback" class="valid-feedback">
          Looks good!
        </div>
      </div>
      <div class="mb-3">
        <label for="email" class="form-label">Email (invalid)</label>
        <input type="email" class="form-control is-invalid" id="email" aria-describedby="emailFeedback" placeholder="name@example.com" />
        <div id="emailFeedback" class="invalid-feedback">
          Please enter a valid email address.
        </div>
      </div>
      <button type="submit" class="btn btn-primary">Submit</button>
    </form>
  </main>
</body>
</html>
OutputSuccess
Important Notes

Always use aria-describedby to link inputs with feedback messages for screen readers.

Validation styles only change appearance; you still need JavaScript or server checks for real validation.

Use these styles to improve user experience by giving clear visual feedback.

Summary

Use is-valid and is-invalid classes to show input status.

Pair inputs with valid-feedback or invalid-feedback messages for clarity.

These styles help users fix mistakes quickly and feel confident about their input.