Bootstrap带浮动标签的输入组验证反馈不显示问题咨询

我发现可以将浮动标签与输入组结合使用，但无法让验证反馈正常显示。代码示例如下：

<div class="input-group has-validation">
    <div class="form-floating">
        <input name="token" placeholder="Enter your admin token" type="password" class="form-control is-valid"
            value="some token" />
        <label>Access Token</label>
    </div>
    <button type="submit" class="btn btn-success">Log in</button>
    <div class="valid-feedback">Looks good!</div>
</div>

Bootstrap中valid-feedback的CSS代码为：

.valid-feedback {
    display: none;
    width: 100%;
    margin-top: 0.25rem;
    font-size: .875em;
    color: var(--bs-form-valid-color);
}

为何该样式默认设置display: none？仅使用无浮动标签的输入组时验证反馈显示正常，我使用的是Bootstrap v5.3.2版本。

一、valid-feedback默认隐藏的原因 #

Bootstrap这么设计是为了只在表单控件处于有效/无效状态时才展示反馈，避免页面加载时就显示冗余信息，保证界面整洁。它的显示依赖于控件的is-valid/is-invalid类，以及反馈元素和控件的结构关联关系。

二、你的代码问题所在 #

你把valid-feedback放在了input-group层级，和带is-valid的input并非直接同级元素——Bootstrap的样式规则要求反馈元素必须是验证控件的直接同级，或者在输入组内部符合特定嵌套结构。而你的input被包裹在form-floating里，外层的valid-feedback无法被关联到input的验证状态，所以一直处于隐藏状态。

三、修复方案 #

把valid-feedback移到form-floating内部，作为input的直接同级元素，这样Bootstrap就能正确识别并触发显示：

<div class="input-group has-validation">
    <div class="form-floating">
        <input name="token" placeholder="Enter your admin token" type="password" class="form-control is-valid"
            value="some token" />
        <label>Access Token</label>
        <div class="valid-feedback">Looks good!</div> <!-- 调整到此处 -->
    </div>
    <button type="submit" class="btn btn-success">Log in</button>
</div>

补充说明 #

如果使用原生表单验证（比如给input加required属性），提交表单时Bootstrap会自动给控件添加is-valid/is-invalid类，只要结构正确，反馈就会自动显示；如果是手动添加验证类，确保反馈元素和控件的同级关系即可生效。

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