Как показать ошибку проверки JavaScript на Bootstrap 4 .btn-group-toggle

Question

Я создал пользовательский интерфейс в виде звездочки, используя Bootstrap 4 .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 метод проверки по умолчанию с использованием 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. Поэтому я добавил дополнительный код для отображения ошибки проверки с помощью API JavaScript HTML5:

// ...
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');
    }
}
// ...

Это добавит класс .invalid-group к объему .btn-group, используя .parentNode.parentNode (дважды),так что мы можем сделать somce стили:

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

Таким образом, появится ошибка валидации, но она не исчезнет [когда она действительна] до повторной отправки формы.