如何修正同CSS类名必填复选框组的表单验证逻辑？

表单结构说明 #

• 复选框组的父容器为 <div class="checkbox">
• 需至少选择一个选项的必填组，父容器会添加 required CSS类
• 点击「保存更改」按钮时，需完成以下验证逻辑：
  1. 遍历所有 <div class="checkbox required"> 元素
  2. 若当前组下至少有一个复选框被选中，隐藏错误提示，继续验证下一组
  3. 若当前组无复选框被选中，显示对应错误提示
  4. 所有组验证通过后，提交表单

问题描述 #

以下是我编写的代码（两个复选框组均为必填），逻辑接近正确，但在 boxes.each 部分没有单独处理每个必填容器，导致验证不符合预期。请给出修正建议。

原代码 #

JavaScript

$(document).ready(function() {
    $("button").click(function(e){
        e.preventDefault();
        var boxes = $('div.checkbox.required');

        boxes.each(function(){
            if($(this).is(":checked"))
            {
                $(".error", this).hide();
                $("form").submit();
                return true;
            } else if($(this).not(":checked")) {
                $(".error", this).show().html("Please fill out all required fields");
                return false;
            }
        });
    });
    
});

CSS

label { font-weight: bold; }
.form-horizontal label span.error { color: red; }
.form-horizontal label div.error { color: red; }
.error {
    padding: 2px;
    font-size: 15px;
    background: #FFDFDF;
    border: 1px solid #FFCACA;
    border-radius: 5px;
    font-weight: normal;
    text-align: center;
    display: none;
}

HTML

<div class="checkbox required">
<h3>Question 1</H3>
  <div class="col-md-4">
    <span class="error"></span>
    <label id="8522[]">
      <input type="checkbox" class="" id="input-8522" name="8522[]" value="23606">
      Behavioral Follow-up
    </label><br>
    <label id="8522[]">
      <input type="checkbox" class="" id="input-8522" name="8522[]" value="23607">
      Medical Follow-up
    </label><br>
  </div>
</div>
<p><br></p>
<div class="checkbox required">
<h3>Question 2</H3>
  <div class="col-md-4">
    <span class="error"></span>
    <label id="8524[]">
      <input type="checkbox" class="" id="input-8524" name="8524[]" value="23608">
      Mild
    </label><br>
    <label id="8524[]">
      <input type="checkbox" class="" id="input-8524" name="8524[]" value="23609" checked="checked">
      Moderate
    </label><br>
    <label id="8524[]">
      <input type="checkbox" class="" id="input-8524" name="8524[]" value="23610">
      Severe
    </label><br>
  </div>
</div>

<p><br></p>

<button type="button" class="btn btn-primary action-save">
<i class="fa fa-save"></i> Save changes
</button>

<script src="https://code.jquery.com/jquery-3.6.3.slim.min.js"></script>

问题分析 #

1. 错误的选中状态判断：代码中用 $(this).is(":checked") 判断父容器的选中状态，但父容器是div，永远不会被选中，应该检查容器内的复选框是否有被选中的
2. 提前提交表单：在 each 循环中验证通过一个组就直接提交表单，会跳过后续组的验证
3. 循环终止逻辑错误：return false 在 each 里仅终止当前循环，无法阻止后续验证流程，也不会阻止表单提交

修正后的JavaScript代码 #

$(document).ready(function() {
    $("button").click(function(e){
        e.preventDefault();
        var boxes = $('div.checkbox.required');
        let isValid = true; // 验证通过标志

        boxes.each(function(){
            // 检查当前容器内是否有选中的复选框
            const hasChecked = $(this).find('input[type="checkbox"]').is(":checked");
            
            if(hasChecked) {
                $(".error", this).hide();
            } else {
                $(".error", this).show().html("Please fill out all required fields");
                isValid = false; // 标记验证不通过
            }
        });

        // 所有组验证通过后再提交表单
        if(isValid) {
            $("form").submit();
        }
    });
});

补充说明 #

• 新增 isValid 变量追踪整体验证状态，确保所有组都验证通过才提交
• 用 $(this).find('input[type="checkbox"]').is(":checked") 正确判断当前组内是否有选中的复选框
• 遍历所有组后再统一判断是否提交表单，避免提前提交

内容的提问来源于stack exchange，提问作者Andrew Rout