Bootstrap Quality Control & Assurance 2 — Questions and Answers
Question 1: Which Bootstrap utility class validates that a form input passes HTML5 constraint validation?
- .is-valid (Correct answer)
- .was-validated
- .valid-input
- .form-valid
Correct answer: .is-valid
.is-valid applies green styling to indicate a field has passed validation.
Question 2: What does adding the .was-validated class to a <form> element accomplish?
- Triggers browser native validation UI only
- Applies Bootstrap's valid/invalid styles to all child inputs based on their validity state (Correct answer)
- Disables form submission
- Adds a loading spinner to the submit button
Correct answer: Applies Bootstrap's valid/invalid styles to all child inputs based on their validity state
.was-validated on the form causes Bootstrap to display valid/invalid feedback for every input that has been touched.
Question 3: In Bootstrap's validation system, which element displays an error message beneath an invalid input?
- .invalid-text
- .error-feedback
- .invalid-feedback (Correct answer)
- .form-error
Correct answer: .invalid-feedback
.invalid-feedback is shown automatically when a sibling input has the .is-invalid class or fails constraint validation inside .was-validated.
Question 4: A tester finds that Bootstrap's .is-valid style is not appearing on a custom checkbox. What is the most likely cause?
- Custom checkboxes require JavaScript to apply validation styles
- The checkbox must be inside a .form-check wrapper and use .form-check-input (Correct answer)
- Bootstrap does not support validation on checkboxes
- The .was-validated class must be removed first
Correct answer: The checkbox must be inside a .form-check wrapper and use .form-check-input
Bootstrap's validation styles for checkboxes rely on the .form-check / .form-check-input structure to apply correctly.
Question 5: Which Bootstrap class should be added to display a tooltip-style validation message instead of a block-level one?
- .valid-tooltip (Correct answer)
- .valid-feedback
- .form-tooltip
- .tooltip-valid
Correct answer: .valid-tooltip
.valid-tooltip renders the success message as an absolutely positioned tooltip overlay rather than a block element.
Question 6: During QA, an engineer notices form validation styles appear before the user interacts with any field on page load. Which is the correct fix?
- Add novalidate to the form
- Remove .was-validated from the form until after the first submit attempt (Correct answer)
- Replace .is-invalid with .form-invalid
- Disable Bootstrap's JavaScript bundle
Correct answer: Remove .was-validated from the form until after the first submit attempt
.was-validated should only be added after the user attempts submission so pre-interaction fields are not shown as invalid.
Question 7: What attribute must be present on a <form> to prevent the browser's native validation UI while still using Bootstrap's custom validation styles?
- data-bs-validate='false'
- novalidate (Correct answer)
- validate='bootstrap'
- autocomplete='off'
Correct answer: novalidate
The novalidate attribute suppresses the browser's built-in validation popups so Bootstrap's styles can take over.
Bootstrap Quality Control & Assurance 2
Which Bootstrap utility class validates that a form input passes HTML5 constraint validation?