Принудительно показывать неверный отзыв в Bootstrap 4

Question

Допустим, у меня есть такой HTML-код:

...
<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>
...

Я хочу заставить показать <div class="invalid-feedback">... без использования JavaScript (хочу использовать только Bootstrap CSS).И я знаю, что могу использовать классы CSS, такие как was-validated или is-invalid, но invalid-feedback находится за пределами form-check.Есть ли простой и простой способ показать invalid-feedback, добавив классы CSS, связанные с Bootstrap?

Я нашел одно решение:

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

Но я чувствую, что это хакерское решение.Пожалуйста, сообщите!

Answer 1

Есть лучшие способы.

1) Посмотрите на класс was-validated, который вы можете установить в форме следующим образом:

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

Когда установленов форме он отображает обратную связь проверки, а также цветовые коды поля ввода.

Просто добавьте его в свою форму условно, когда проверка не удалась на стороне сервера .

2) Или вы можете использовать JavaScript , чтобы контролировать то, что отображается.Вы можете добавить этот класс динамически

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

, и вы также можете динамически проверять правильность формы, например

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

Answer 2

Используйте классы отображения, чтобы отобразить его вручную, например, d-block

используйте его следующим образом:

<div class="valid-feedback d-block"> 

или

<div class="invalid-feedback d-block">

Найти больше вдокументация