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.

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