jQuery Validate 文本框有值时至少勾选1个复选框的验证问题

实现思路 #

• 自定义验证规则，规则逻辑中同步判断文本框textfield的输入状态和复选框的选中状态
• 通过jQuery Validate的groups配置合并三个复选框的错误提示，避免重复报错

核心代码 #

1. 新增自定义验证规则 #

$.validator.addMethod("requireCheckboxIfTextFilled", function(value, element) {
    // 获取文本框输入值，去除首尾空格
    const textVal = $.trim($('input[name="textfield"]').val());
    // 文本框为空时直接通过验证
    if (textVal === "") return true;
    // 文本框有值时，校验三个复选框是否至少有一个选中
    return $('input[name="a"]:checked, input[name="b"]:checked, input[name="c"]:checked').length > 0;
}, "文本框已输入，请至少勾选一个选项");

2. 表单验证初始化配置 #

$("form").validate({
    // 合并三个复选框的错误提示，仅展示一次
    groups: {
        checkboxGroup: "a b c"
    },
    rules: {
        a: {
            requireCheckboxIfTextFilled: true
        },
        b: {
            requireCheckboxIfTextFilled: true
        },
        c: {
            requireCheckboxIfTextFilled: true
        }
    },
    // 可选配置：统一错误提示的展示位置
    errorPlacement: function(error, element) {
        if (element.is(":checkbox")) {
            error.insertAfter($('input[name="c"]'));
        } else {
            error.insertAfter(element);
        }
    }
});

逻辑说明 #

• 文本框textfield无输入时，自定义规则直接返回校验通过，复选框无强制勾选要求
• 文本框textfield有任意输入时，会触发复选框校验逻辑，必须至少勾选1个才能通过表单验证

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