Form validation styles in Bootsrap - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of form validation styles in Bootstrap?

Form validation styles in Bootstrap help visually indicate to users whether their input is valid or invalid, improving user experience and accessibility.

beginner

Which Bootstrap class adds a green border and check icon to a valid input field?

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

beginner

Which Bootstrap class adds a red border and cross icon to an invalid input field?

The class is-invalid adds a red border and a cross icon to indicate the input is invalid.

beginner

How do you display a custom error message below an invalid input in Bootstrap?

Use a <div> with the class invalid-feedback immediately after the input field to show a custom error message.

intermediate

What attribute should be added to a form to enable Bootstrap's custom validation styles?

Add the novalidate attribute to the <form> element to disable native browser validation and use Bootstrap's custom styles.

Which class would you add to an input to show it is valid in Bootstrap?

A is-valid

B is-invalid

C valid-input

D input-valid

The is-valid class applies green border and check icon to valid inputs.

What class shows a red border and error icon for invalid inputs?

A invalid-feedback

B input-error

C is-invalid

D error-input

The is-invalid class styles inputs with a red border and error icon.

Where should you place the invalid-feedback element?

A Immediately after the input field

B Inside the input field

C Before the input field

D Anywhere in the form

The invalid-feedback element must be placed immediately after the input to show error messages properly.

What does the novalidate attribute do on a form?

A Enables native browser validation

B Adds Bootstrap validation styles automatically

C Prevents form submission

D Disables native browser validation

The novalidate attribute disables native browser validation so you can use custom Bootstrap validation.

Which icon appears with is-valid class in Bootstrap forms?

A Red cross

B Green checkmark

C Yellow warning

D Blue info

The is-valid class shows a green checkmark icon to indicate valid input.

Explain how to use Bootstrap classes to show valid and invalid form input states.

Think about the colors and icons that help users know if their input is correct.

Describe how to add custom error messages for invalid inputs using Bootstrap.

Where do you put the message and what class do you use?