如何在Bootstrap 4.btn组切换上显示JavaScript验证错误

我已经使用Bootstrap 4制作了一个星级用户界面，如下所示：

<div class="form-group">
    <div class="btn-group btn-group-toggle" data-toggle="buttons" aria-label="Rate this">
        <label class="btn btn-dark btn-sm">
            <input type="radio" name="rating" value="1" required> 1
        </label>
        <label class="btn btn-dark btn-sm">
            <input type="radio" name="rating" value="2" required> 2
        </label>
        <label class="btn btn-dark btn-sm">
            <input type="radio" name="rating" value="3" required> 3
        </label>
        <label class="btn btn-dark btn-sm">
            <input type="radio" name="rating" value="4" required> 4
        </label>
        <label class="btn btn-dark btn-sm">
            <input type="radio" name="rating" value="5" required> 5
        </label>
    </div>
    <div class="invalid-feedback">
        Please rate the item in the scale of 5
    </div>
</div>

<input type="text" class="form-control" required>
<div class="invalid-feedback">
    The text field is mandatory
</div>

1.
2.
3.
4.
5.
请按5分制给这个项目打分

但不幸的是，当没有提供评级时，验证错误是不可见的。我使用的是使用JavaScript建议的Bootstrap4

---

如何显示

.btn组切换的验证错误？
引导4自定义验证消息实际使用以下规则显示：

.was-validated .form-control:invalid ~ .invalid-feedback,
.was-validated .form-control:invalid ~ .invalid-tooltip,
.form-control.is-invalid ~ .invalid-feedback,
.form-control.is-invalid ~ .invalid-tooltip {
    display: block;
}

tilde
~
是CSS中的同级组合符，仅当验证错误如下所示时，它才起作用：

<div class="form-group">
    <div class="btn-group btn-group-toggle" data-toggle="buttons" aria-label="Rate this">
        <label class="btn btn-dark btn-sm">
            <input type="radio" name="rating" value="1" required> 1
        </label>
        <label class="btn btn-dark btn-sm">
            <input type="radio" name="rating" value="2" required> 2
        </label>
        <label class="btn btn-dark btn-sm">
            <input type="radio" name="rating" value="3" required> 3
        </label>
        <label class="btn btn-dark btn-sm">
            <input type="radio" name="rating" value="4" required> 4
        </label>
        <label class="btn btn-dark btn-sm">
            <input type="radio" name="rating" value="5" required> 5
        </label>
    </div>
    <div class="invalid-feedback">
        Please rate the item in the scale of 5
    </div>
</div>

<input type="text" class="form-control" required>
<div class="invalid-feedback">
    The text field is mandatory
</div>

这将使用
.parentNode.parentNode
（两次）将类
.invalid group
添加到拥抱
.btn group
，以便我们可以执行以下样式：

.was-validated .group-invalid + .invalid-feedback {
    display: block;
}

这样，验证错误将出现，但在再次提交表单之前，它不会[在有效时]消失