Form validation styles in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output of this Bootstrap form validation code?

Consider this HTML snippet using Bootstrap 5 validation classes. What will the user see after submitting the form with an empty required input?

Bootsrap

<form class="needs-validation" novalidate>
  <div class="mb-3">
    <label for="emailInput" class="form-label">Email address</label>
    <input type="email" class="form-control" id="emailInput" required>
    <div class="invalid-feedback">
      Please provide a valid email.
    </div>
  </div>
  <button class="btn btn-primary" type="submit">Submit</button>
</form>
<script>
(() => {
  'use strict'
  const form = document.querySelector('.needs-validation')
  form.addEventListener('submit', event => {
    if (!form.checkValidity()) {
      event.preventDefault()
      event.stopPropagation()
    }
    form.classList.add('was-validated')
  }, false)
})()

A The input border turns red and the message 'Please provide a valid email.' appears below the input.

B The form submits successfully without any validation message.

C The input border turns green and the message 'Please provide a valid email.' appears.

D Nothing happens; the form submits and reloads the page.

💡 Hint

Bootstrap uses 'was-validated' class to show validation feedback after checking validity.

When the form is submitted with an empty required email input, checkValidity() returns false. The script prevents submission and adds the was-validated class. Bootstrap styles the input border red and shows the invalid-feedback message.

❓ selector

intermediate

Which CSS selector applies styles to invalid form inputs in Bootstrap?

Bootstrap uses CSS selectors to style invalid inputs. Which selector correctly targets invalid inputs to show red borders?

A input.invalid

B .was-validated .form-control:invalid

C .form-control:invalid

D input:invalid

💡 Hint

Bootstrap applies validation styles only after the form has the 'was-validated' class.

Bootstrap styles invalid inputs only when the form has the was-validated class. The selector .was-validated .form-control:invalid applies red borders and shows feedback messages.

❓ rendering

advanced

What visual result will this Bootstrap validation produce?

This form input has the class 'form-control is-valid' applied. What will the user see?

Bootsrap

<input type="text" class="form-control is-valid" aria-describedby="validFeedback">
<div id="validFeedback" class="valid-feedback">
  Looks good!
</div>

A The input border is green but the message is hidden.

B The input border is red and the message 'Looks good!' is visible.

C The input border is default gray and no message is shown.

D The input border is green and the message 'Looks good!' is visible below the input.

💡 Hint

The 'is-valid' class triggers green border and shows the valid-feedback message.

The is-valid class styles the input border green. The valid-feedback message is shown by default when this class is present.

❓ accessibility

advanced

Which attribute improves accessibility for Bootstrap validation feedback?

To help screen readers associate validation messages with inputs, which attribute should be used on the input element?

A aria-hidden

B aria-label

C aria-describedby

D aria-live

💡 Hint

This attribute links the input to the feedback message by ID.

The aria-describedby attribute on the input points to the ID of the validation message. This helps screen readers read the message when the input is focused.

🧠 Conceptual

expert

How does Bootstrap's validation script prevent form submission on invalid input?

Examine this JavaScript snippet used with Bootstrap validation. What is the key method that stops the form from submitting if inputs are invalid?

Bootsrap

form.addEventListener('submit', event => {
  if (!form.checkValidity()) {
    event.preventDefault()
    event.stopPropagation()
  }
  form.classList.add('was-validated')
}, false)

A event.preventDefault() stops the form submission when inputs are invalid.

B event.stopPropagation() alone stops the form submission.

C form.classList.add('was-validated') prevents submission automatically.

D checkValidity() submits the form if inputs are valid.

💡 Hint

Preventing default behavior stops the form from sending data.

The event.preventDefault() method stops the browser from submitting the form if the inputs are invalid. The checkValidity() method returns false when inputs fail validation.