javascript - 如何在 Bootstrap 4 .btn-group-toggle 上显示 JavaScript 验证错误

Question

我使用 Bootstrap 4 制作了一个星级评分 UI .btn-group.btn-group-toggle如下所示:

<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>

但不幸的是，当未提供评级时，验证错误是不可见的。我正在使用建议的 Bootstrap 4 HTML5 default validation method使用 JavaScript。

如何显示 .btn-group-toggle 的验证错误？

Answer 1

Bootstrap 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;
}

波浪号 ~ 是 CSS 中的兄弟组合符，它仅在验证错误存在时才有效，如下所示:

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

.form-control 和 .invalid-feedback 是兄弟。

但在我的例子中，输入字段(单选按钮)比 .invalid-feedback 深得多。所以我使用 HTML5 javascript API 添加了一些额外的代码来显示验证错误:

// ...
if (form.checkValidity() === false) {
    event.preventDefault();
    event.stopPropagation();

    var theRadio = form.querySelector('input[type=radio]');
    if (theRadio.checkValidity() === false) {
        theRadio.parentNode.parentNode.classList.add('group-invalid');
    } else {
        theRadio.parentNode.parentNode.classList.remove('group-invalid');
    }
}
// ...

这将使用 .parentNode.parentNode (两次)将类 .invalid-group 添加到包含的 .btn-group ，这样我们就可以做一些样式:

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

这样会出现验证错误，但不会消失[when valid]，直到再次提交表单。