如何验证复选框关联输入字段？表单提交拦截问题求助

问题核心 #

当前代码能检测到空字段错误，但无法阻止表单提交；用普通if else会误校验未勾选复选框的关联字段。需要实现：仅校验已勾选复选框对应的输入字段，全部非空才提交数据。

修改后的验证代码 #

// 初始化验证通过状态
let isValid = true;

// 保留原有基础用户信息验证逻辑
if(fname === ""){
    $('#fname').removeClass('border-success').addClass('border-danger');
    isValid = false;
} else if(region === "-Select-"){
    Swal.fire('Select', "Please select a region",'warning');
    isValid = false;
} else if(province === "-Select-"){
    Swal.fire('Select', "Please select a province",'warning');
    isValid = false;
}

// 验证已勾选复选框的关联输入字段
if($('#box1').is(':checked')){
    // 遍历box1对应的所有输入字段（需给这些字段加统一class：box1-fields）
    $('.box1-fields').each(function(){
        // 去除首尾空格后判断是否为空
        if($(this).val().trim() === ""){
            Swal.fire('Warning', "Empty Field",'warning');
            isValid = false;
            return false; // 跳出当前each循环，不再检查其他字段
        }
    });
}

// 验证不通过则阻止提交
if(!isValid){
    return false;
}

关键优化点 #

1. 统一验证状态管理：用isValid变量跟踪所有验证结果，只要有一项不通过就设为false，最后通过return false阻止表单提交（解决原代码无法阻止提交的问题）。
2. 精准关联字段：给复选框对应的输入字段添加统一class（如box1-fields），避免数组遍历可能的关联错误，仅校验已勾选复选框的关联字段。
3. 简化逻辑：去掉冗余的try/catch，用更直接的条件判断，逻辑更清晰易维护。

多复选框场景扩展（可选） #

如果有多个带关联字段的复选框，可通过data属性统一处理，无需重复写判断：

HTML结构示例

<input type="checkbox" id="box1" data-target-fields=".box1-fields">
<input type="text" class="box1-fields" placeholder="输入内容1">
<input type="text" class="box1-fields" placeholder="输入内容2">

<input type="checkbox" id="box2" data-target-fields=".box2-fields">
<input type="text" class="box2-fields" placeholder="输入内容3">

对应JS逻辑

// 替换单个复选框的验证逻辑，统一处理所有带data-target-fields的复选框
$('input[type="checkbox"][data-target-fields]').each(function(){
    const $checkbox = $(this);
    if($checkbox.is(':checked')){
        const targetFields = $checkbox.data('target-fields');
        $(targetFields).each(function(){
            if($(this).val().trim() === ""){
                Swal.fire('Warning', "Empty Field",'warning');
                isValid = false;
                return false;
            }
        });
    }
});

这种方式新增复选框时，只需修改HTML添加对应属性和class，无需改动JS代码，扩展性更强。

内容的提问来源于stack exchange，提问作者Rico Littawa