Bootstrap是否有!invalid-feedback对应类？纯样式实现表单提示互斥

核心问题解答 #

• Bootstrap里没有等价于!invalid-feedback的类，valid-feedback是验证成功时显示的提示容器类，is-valid是给表单控件添加的“验证通过”状态类，和你要的“验证失败时隐藏正常提示”需求不匹配。
• 完全可以不用JS/jQuery，纯靠CSS+Bootstrap自带的表单状态机制实现需求。

实现方案 #

Bootstrap在表单验证失败时，会给对应的.form-control控件自动加上.is-invalid类（前提是用了Bootstrap的原生表单验证，比如带required属性）。我们可以利用这个状态类，通过CSS选择器控制正常提示文本的显示：

修改你的代码，给提示文本加个自定义类（比如input-hint），然后添加CSS规则：

<form:input path="ac" required="required"
    class="form-control text-uppercase" maxlength="3" />
<small class="form-text text-muted input-hint">Only three characters are allowed</small>
<div class="invalid-feedback">AC is required</div>

<style>
/* 当输入框处于验证失败状态时，隐藏正常提示文本 */
.form-control.is-invalid ~ .input-hint {
    display: none;
}
</style>

原理说明 #

• 正常状态下，.input-hint（原提示文本）正常显示，.invalid-feedback因Bootstrap自带样式默认隐藏。
• 当输入框验证失败（比如为空提交），控件被自动加上.is-invalid类，通过相邻兄弟选择器~选中后面的.input-hint并设置display: none隐藏它，同时Bootstrap会自动显示.invalid-feedback，实现两者互斥显示。

内容的提问来源于stack exchange，提问作者p0tta