强制在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).而且我知道我可以使用像was-validated或者类似的CSS类is-invalid,但invalid-feedback不在form-check.是否有一种简单易用的方法来invalid-feedback添加Bootstrap相关的CSS类？

我找到了一个解决方案

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

但我觉得这是一个hacky解决方案.请指教!

Answer 1

例如,使用显示类手动显示它 d-block

像这样使用它

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

在文档中查找更多内容

Answer 2

有更好的方法。

1） 查看一个was-validated类，您可以像这样在表单上设置

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

在表单上设置时，它会显示验证反馈并对输入字段进行颜色编码。

当服务器端验证失败时，只需在您的表单上有条件地添加它。

2) 或者您可以使用一些JavaScript来控制显示的内容。您可以动态添加此类

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

并且您还可以像这样动态检查表单是否有效

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