Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

invalid feedback stays hidden when use in a form group with a custom checkbox

See original GitHub issue

I have a custom checkbox which gets a validation error and the invalid-feedback div stays with display-none.

Below is the code generated. A message explaining why the checkbox must be checked is sometimes important.

<div class="form-group">
   <div class="custom-control custom-checkbox is-invalid" id="agree_terms_wrapper">
      <input class="custom-control-input is-invalid" type="checkbox" name="agree_terms" id="agree_terms" value="1">
      <label class="custom-control-label" for="agree_terms">I agree to the terms and conditions</label>
   </div>
   <div class="invalid-feedback">Terms and conditions must be carefully read and accepted. You cannot access our service otherwise.</div>
</div>

Issue Analytics

State:
Created 5 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

50reactions

matin-Walizadacommented, May 6, 2019

To fix this issue use class=“invalid-feedback d-block” it works perfect.

0reactions

kamilkahar90commented, Aug 21, 2019

sorry if my comment a little bit late… just solved it by myself… u need to put form-control class in the input

Top Results From Across the Web

Force to show invalid-feedback in Bootstrap 4 - Stack Overflow

And I know I can use CSS classes like was-validated or is-invalid , but invalid-feedback is outside of form-check .

Validation · Bootstrap v5.2

When attempting to submit, you'll see the :invalid and :valid styles applied to your form controls. Custom feedback styles apply custom colors, borders, ......

Validation - CoreUI

Provide valuable, actionable feedback to your users with HTML5 form validation, via browser default behaviors or custom styles and JavaScript.

The "Checkbox Hack" (and things you can do with it)

Using a hidden checkbox, you can re-create a lot of functionality on website that rely on clicks and toggled states.

Form controls | Bulma: Free, open source, and modern CSS ...

label; input; textarea; select; checkbox; radio; button; help. To maintain an evenly balanced design, Bulma provides a very useful control container with ...