Form validation styles in Bootsrap

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="[e-mail]" />
        <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>

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.

Practice

1. Which Bootstrap class should you add to an input element to show it has valid data?

easy

A. valid-feedback

B. is-invalid

C. is-valid

D. invalid-feedback

Solution

1. Step 1: Understand Bootstrap validation classes

   Bootstrap uses is-valid to mark inputs as valid and is-invalid for invalid inputs.

2. Step 2: Identify the class for valid input

   The class is-valid visually marks the input as valid with green borders and icons.

3. Final Answer:

   is-valid -> Option C

4. Quick Check:

   Valid input class = is-valid [OK]

Hint: Valid input uses is-valid class for green highlight [OK]

Common Mistakes:

• Confusing is-valid with is-invalid
• Using feedback classes on input instead of messages
• Not adding any validation class

2. Which of the following is the correct way to add invalid feedback text below an input in Bootstrap?

easy

A. Error message

B. Error message

C. Error message

D. Error message

Solution

1. Step 1: Identify the correct feedback container

   Bootstrap uses invalid-feedback class inside a div to show invalid messages.

2. Step 2: Match the correct HTML structure

   The correct syntax is <div class="invalid-feedback">Message</div> placed after the input.

3. Final Answer:

   <div class="invalid-feedback">Error message</div> -> Option B

4. Quick Check:

   Invalid feedback uses div.invalid-feedback [OK]

Hint: Use div with invalid-feedback class for error messages [OK]

Common Mistakes:

• Using is-invalid class on feedback text instead of input
• Using valid-feedback class for invalid messages
• Placing feedback inside input tag

3. What will be the visual result of this code snippet?

<input type="text" class="form-control is-invalid" />
<div class="invalid-feedback">Please enter a valid name.</div>

medium

A. Input box with red border and error message below

B. Input box with green border and success message below

C. Input box with no border color change and no message

D. Input box with blue border and warning message below

Solution

1. Step 1: Analyze the input classes

   The input has is-invalid which applies a red border and error icon.

2. Step 2: Check the feedback message

   The invalid-feedback div shows the error message below the input in red text.

3. Final Answer:

   Input box with red border and error message below -> Option A

4. Quick Check:

   is-invalid + invalid-feedback = red error style [OK]

Hint: is-invalid input + invalid-feedback message = red error style [OK]

Common Mistakes:

• Confusing is-invalid with is-valid
• Expecting green border for is-invalid
• Missing feedback message display

4. Identify the error in this Bootstrap form validation snippet:

<input type="email" class="form-control" id="email" required>
<div class="valid-feedback">Looks good!</div>
<div class="invalid-feedback">Please enter a valid email.</div>

medium

A. The feedback messages should be inside the input tag

B. The required attribute is invalid in Bootstrap forms

C. The input type should be text instead of email

D. The input is missing is-valid or is-invalid class to show validation state

Solution

1. Step 1: Check validation classes on input

   The input lacks is-valid or is-invalid classes, so no visual feedback appears.

2. Step 2: Confirm feedback message placement and attributes

   Feedback messages are correctly placed outside input; required is valid HTML5 attribute.

3. Final Answer:

   The input is missing is-valid or is-invalid class to show validation state -> Option D

4. Quick Check:

   Validation classes needed on input for feedback display [OK]

Hint: Add is-valid or is-invalid class to input for feedback to show [OK]

Common Mistakes:

• Placing feedback inside input tag
• Removing required attribute thinking it's Bootstrap-only
• Using wrong input type for email

5. You want to create a form where the input shows green border and a success message only after the user submits valid data. Which Bootstrap classes and structure should you use?

hard

A. Add is-valid to input and place success message inside div.valid-feedback after input

B. Add is-invalid to input and place success message inside div.invalid-feedback

C. Add valid-feedback class to input and place message inside span

D. Add is-valid to input and place success message inside span.invalid-feedback

Solution

1. Step 1: Choose correct validation class for success

   Use is-valid on input to show green border and success icon.

2. Step 2: Place success message correctly

   Success message goes inside a div with class valid-feedback placed immediately after the input.

3. Final Answer:

   Add is-valid to input and place success message inside div.valid-feedback after input -> Option A

4. Quick Check:

   Success = is-valid + div.valid-feedback [OK]

Hint: Use is-valid on input and div.valid-feedback for success message [OK]

Common Mistakes:

• Mixing invalid classes with success messages
• Using span instead of div for feedback
• Placing feedback before input