How to show JavaScript validation error on Bootstrap 4 .btn-group-toggle

Question

I've made a star rating UI using the Bootstrap 4 .btn-group.btn-group-toggle like below:

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

But unfortunately, the validation error is not visible when the rating is not provided. I'm using the Bootstrap 4 suggested HTML5 default validation method using JavaScript.

How can I display validation error for .btn-group-toggle?

Answer 1

The Bootstrap 4 custom validation message actually displays using the following rule:

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

The tilde ~ is the sibling combinator in CSS, which only works when a validation error resides like below:

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

where both the .form-control and .invalid-feedback are sibling.

But in my case, the input field (the radio buttons) are way deeper than the .invalid-feedback. So I put some extra code to display the validation error using the 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');
    }
}
// ...

This is will add a class .invalid-group to the embracing .btn-group using the .parentNode.parentNode (twice), so that we can do somce styles:

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

In this way, the validation error will appear, but it won't disappear [when valid] until the form is resubmitted again.