Force to show invalid-feedback in Bootstrap 4

Question

Let's say I have HTML like this:

...
<div class="form-group">
    <div class="form-check">
        <input class="form-check-input" type="checkbox" id="invalidCheck">
        <label class="form-check-label" for="invalidCheck">
            Agree to something
        </label>
    </div>

    <div class="invalid-feedback">
        I am outside of `form-check`!
    </div>
</div>
...

I want to force to show the <div class="invalid-feedback">... without using JavaScript (want to use Bootstrap CSS only). And I know I can use CSS classes like was-validated or is-invalid, but invalid-feedback is outside of form-check. Is there an easy and simple way to show invalid-feedback by adding Bootstrap related CSS classes?

I found one solution:

<div class="invalid-feedback d-block">
    Now I am visible!
</div>

But I feel like it's a hacky solution. Please advise!

Answer 1

There are better ways.

1) Look into a was-validated class, that you can set on the form like so

<form action="..." class="was-validated" method="POST" novalidate>

When set on the form it displays validation feedback and also colorcodes the input field.

Just add it conditionally on your form, when validation failed on the server side.

2) Or you can use some JavaScript to be in control of what is displayed. You can add this class dynamically

$('form').addClass('was-validated');

and you can also dynamically check if the form is valid like so

 if ($('form').checkValidity()) {...