Form validation styles in Bootsrap - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Bootstrap class that shows a valid input style.

Bootsrap

<input type="text" class="form-control [1]" id="username" required>

Drag options to blanks, or click blank then click option'

Ais-invalid

Bis-valid

Cform-check

Dform-label

Attempts:

3 left

💡 Hint

Common Mistakes

Using is-invalid which styles the input as invalid.

Using unrelated classes like form-check or form-label.

The is-valid class adds a green border and check icon to show the input is valid.

2fill in blank

medium

Complete the code to add a Bootstrap class that shows an invalid input style.

Bootsrap

<input type="email" class="form-control [1]" id="email" required>

Drag options to blanks, or click blank then click option'

Aform-control-lg

Bform-text

Cis-invalid

Dis-valid

Attempts:

3 left

💡 Hint

Common Mistakes

Using is-valid which styles the input as valid.

Using size classes like form-control-lg which do not affect validation.

The is-invalid class adds a red border and error icon to show the input is invalid.

3fill in blank

hard

Fix the error in the code to correctly show the invalid feedback message.

Bootsrap

<div class="invalid-feedback">[1]</div>

Drag options to blanks, or click blank then click option'

Ainvalid-feedback

Bform-control

Cis-invalid

DPlease enter a valid email.

Attempts:

3 left

💡 Hint

Common Mistakes

Putting a class name inside the div instead of the message text.

Leaving the div empty so no message shows.

The invalid-feedback div should contain the error message text, not a class name.

4fill in blank

hard

Fill both blanks to create a valid input with a feedback message.

Bootsrap

<input type="text" class="form-control [1]" id="name" required>
<div class="[2]">Looks good!</div>

Drag options to blanks, or click blank then click option'

Ais-valid

Bform-control

Cvalid-feedback

Dinvalid-feedback

Attempts:

3 left

💡 Hint

Common Mistakes

Using invalid-feedback with a valid input.

Not adding the is-valid class to the input.

The input uses is-valid to show valid style, and the div uses valid-feedback to show the positive message.

5fill in blank

hard

Fill all three blanks to create an invalid input with a feedback message and label.

Bootsrap

<label for="password" class="form-label [1]">Password</label>
<input type="password" class="form-control [2]" id="password" required>
<div class="[3]">Password is required.</div>

Drag options to blanks, or click blank then click option'

Atext-danger

Bis-invalid

Cinvalid-feedback

Dform-text

Attempts:

3 left

💡 Hint

Common Mistakes

Using valid-feedback with invalid input.

Not styling the label to indicate error.

Missing the is-invalid class on the input.

The label uses text-danger to show red text, the input uses is-invalid for invalid style, and the div uses invalid-feedback to show the error message.