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

我希望强制在不使用JavaScript的情况下显示<div class="invalid-feedback">...（仅想使用Bootstrap CSS）。我知道我可以使用was-validated或is-invalid等CSS类，但invalid-feedback不在form-check之内。是否有一种通过添加Bootstrap相关CSS类来显示invalid-feedback的简单方法？

我找到了一个解决方案：

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

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

Answer 1

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

像这样使用

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

Find more in documentation

Answer 2

有更好的方法。

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

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

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

当服务器端验证失败时，只需有条件地将其添加到您的表单中即可。

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

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

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

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

强制在Bootstrap 4中显示无效反馈

2 个答案: