Проверка больше не работает должным образом, когда я использую setCustomValidity для сгруппированных флажков

Question

У меня есть веб-приложение, для которого я пытаюсь программно контролировать проверку формы, и у меня возникают некоторые проблемы.

Почему программно?Потому что, кажется, нет способа установить группу флажков на «требуемый» (я могу установить каждый отдельный флажок на «обязательный», но не на группу).Вот что я сделал:

<fieldset>
                        <legend class="checkbox-group-legend">What brings you to Calgary?</legend>
                        <div class="checkbox-group">
                            <div class="row">
                                <div class="col-sm-6 col-xs-12">
                                    <input type="checkbox" group="reason" id="vacation" name="vacation" onclick="reasonForVisitingChecked()" required>Vacation
                                </div>
                                <div class="col-sm-6 col-xs-12">
                                    <input type="checkbox" group="reason" id="business" name="business" onclick="reasonForVisitingChecked()" required>Business
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 col-xs-12">
                                    <input type="checkbox" group="reason" id="liveHere" name="liveHere" onclick="reasonForVisitingChecked()" required>Live Here
                                </div>
                                <div class="col-sm-6 col-xs-12">
                                    <input type="checkbox" group="reason" id="other" name="other" onclick="reasonForVisitingChecked()" required>Other
                                </div>
                            </div>
                        </div>
                    </fieldset>

Javascript:

    function reasonForVisitingChecked() {
        var reasonForVisitingCheckboxes = $("input:checkbox[group='reason']");
        reasonForVisitingCheckboxes.prop('required', true);
        for (var i = 0; i < reasonForVisitingCheckboxes.length; i++) {
            if ($(reasonForVisitingCheckboxes[i]).is(':checked')) {
                reasonForVisitingCheckboxes.prop('required', false);
                break;
            }
        }
    }

Я получил вот этот трюк:

Использование HTML5 "требуется"атрибут для группы флажков?

Это прекрасно работает ... за исключением того, что теперь я получаю очень вводящее в заблуждение сообщение проверки, когда флажок не установлен:

Он указывает на флажок «отпуск» и говорит пользователю проверить его.

Поэтому я искал способы изменить сообщение об ошибке проверки и наткнулся на это:

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/setCustomValidity

Это говорит об использовании setCustomValidity (string) следующим образом:

<fieldset>
                        <legend class="checkbox-group-legend">What brings you to Calgary?</legend>
                        <div class="checkbox-group">
                            <div class="row">
                                <div class="col-sm-6 col-xs-12">
                                    <input type="checkbox" group="reason" id="vacation" name="vacation" onclick="reasonForVisitingChecked()" oninvalid="this.setCustomValidity('Please select at least one checkbox.')" onvalid="this.setCustomValidity('')" required>Vacation
                                </div>
                                <div class="col-sm-6 col-xs-12">
                                    <input type="checkbox" group="reason" id="business" name="business" onclick="reasonForVisitingChecked()" oninvalid="this.setCustomValidity('Please select at least one checkbox.')" onvalid="this.setCustomValidity('')" required>Business
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-6 col-xs-12">
                                    <input type="checkbox" group="reason" id="liveHere" name="liveHere" onclick="reasonForVisitingChecked()" oninvalid="this.setCustomValidity('Please select at least one checkbox.')" onvalid="this.setCustomValidity('')" required>Live Here
                                </div>
                                <div class="col-sm-6 col-xs-12">
                                    <input type="checkbox" group="reason" id="other" name="other" onclick="reasonForVisitingChecked()" oninvalid="this.setCustomValidity('Please select at least one checkbox.')" onvalid="this.setCustomValidity('')" required>Other
                                </div>
                            </div>
                        </div>
                    </fieldset>

Это также прекрасно работает ... за исключением того, что теперь получено сообщение об ошибке проверки 'не уходить, даже если я установил один или несколько флажков и нажал «Отправить».Это как если бы моя функция для удаления атрибута «required» работала, но она не отменяла недопустимое состояние флажков ... но опять же, как это работало без вызовов setCustomValidity (...)?

Так вот в чем проблема: мне нужно поместить какой-то атрибут «обязательный» в группу флажков (не отдельные флажки), чтобы пользователь должен был установить хотя бы один флажок.Моя функция выше для переключения атрибута «required», когда установлен хотя бы один флажок, работает, но оставляет сообщение об ошибке проверки неверности.Вызов setCustomValidaty (...) исправляет вводящее в заблуждение сообщение, но не исчезнет, ​​если установлен один или несколько флажков (и фактически не позволит отправить форму).

Пожалуйста, помогите.Спасибо.