Question

我有一个Web应用程序，正在尝试以编程方式控制表单验证，并且遇到了一些问题。

为什么要以编程方式？因为似乎没有办法将复选框组设置为“ required”（我可以将每个复选框都设置为“ required”，但不能将组设置为“ required”）。所以这就是我所做的：

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

我从这里得到了这个窍门：

Using the HTML5 "required" attribute for a group of checkboxes?

这很好用...除了现在没有选中任何复选框时，我收到一条非常误导性的验证消息：

它指向“假期”复选框，并告诉用户对其进行检查。

因此，我查找了更改验证错误消息的方法，但偶然发现了这一点：

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>

这也很好用...除了现在，即使我选中一个或多个复选框并点击Submit，验证错误消息也不会消失。好像我删除“ required”属性的功能正在工作，但并没有撤消复选框的无效状态...但是，再次，如果没有调用setCustomValidity（...），它是如何工作的？

所以这是问题所在：我需要在复选框组（而不是单个复选框）上放置某种“必需”属性，以便用户必须选中至少一个复选框。上面的我的函数，当选中至少一个复选框时，切换“必需”属性有效，但给我留下了误导性验证错误消息。对setCustomValidaty（...）的调用可修复误导性消息，但在选中一个或多个复选框时不会消失（并且实际上不允许提交表单）。

请帮助。谢谢。

当我在分组复选框上使用setCustomValidity时，验证不再正常工作

0 个答案: