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

【问题标题】：Force to show invalid-feedback in Bootstrap 4强制在 Bootstrap 4 中显示无效反馈
【发布时间】：2018-10-30 02:00:03
【问题描述】：

假设我有这样的 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 解决方案。请指教！

【问题讨论】：

在Bootstrap-4中，你可以在没有JS的情况下验证表单吗？
使用d-block display util 将是强制它显示的唯一引导方法。反馈类旨在与验证一起使用。
@YevgeniyAfanasyev 你能看看我的这个question。这对我很有帮助我有点卡在这里

标签： css twitter-bootstrap bootstrap-4

【解决方案1】：

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

像这样使用它

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

或

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

Find more in documentation

【讨论】：

【解决方案2】：

有更好的方法。

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

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

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

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

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

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

你也可以像这样动态检查表单是否有效

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

【讨论】：