假设我有这样的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
之外。有没有一个简单的方法来显示invalid-feedback
通过添加Bootstrap相关的CSS类?
我找到了一个解决办法:
<div class="invalid-feedback d-block">
Now I am visible!
</div>
但我觉得这是一个古怪的解决方案。请指教!
3条答案
按热度按时间ddhy6vgd1#
使用显示类手动显示,例如
d-block
像这样使用它
或
Find more in documentation
czq61nw12#
还有更好的办法。
**1)**查看一个
was-validated
类,您可以在表单上设置它,如下所示当在表单上设置时,它会显示验证反馈,并对输入字段进行颜色编码。
只要在服务器端验证失败时,有条件地将其添加到表单中即可。
2)或者您可以使用一些JavaScript来控制显示的内容。您可以动态添加此类
你也可以像这样动态检查表单是否有效
g52tjvyc3#
如果你有一个
invalid-feedback
类的div,但它不是紧跟着一个必需的输入标记,那么即使在将was-validated
添加到表单中之后,它也可能不会显示。然而,下面的黑客应该工作。