不同name的复选框至少勾选一个的验证问题求助

你的代码存在几个问题导致验证失效：

1. 表单未设置id="Edit"，但jQuery代码尝试选中#Edit，导致验证器无法绑定到表单
2. 自定义验证方法名称与元素class不匹配，且未将规则应用到对应复选框
3. 使用了已废弃的size()方法，应替换为length属性

以下是修正后的完整方案：

步骤1：给表单添加id #

修改表单标签，补充id="Edit"：

<form asp-action="Edit" id="Edit">
    <div class="form-group row">
        <div class="col">
            <input asp-for="HREmployee" type="checkbox" class="require-one" value="1" /> Human Resources Employee
        </div>
    </div>
    <div class="form-group row">
        <div class="col">
            <input asp-for="ManagementEmployee" type="checkbox" class="require-one" value="2" /> Management
        </div>
    </div>
    <div class="form-group row">
        <div class="col">
            <input asp-for="StaffEmployee" type="checkbox" class="require-one" value="3" /> Staff Employee
        </div>
    </div>
    <input type="submit" id="myBtn1" value="Submit" class="btn btn-primary" />
</form>

步骤2：正确配置jQuery验证 #

使用jQuery Validation插件的自定义方法，实现至少勾选一个的验证逻辑：

jQuery(document).ready(function () {
    // 自定义验证方法：检查带require-one类的复选框是否有被勾选
    $.validator.addMethod('require-one', function (value, element) {
        return $('.require-one:checked').length > 0;
    }, '请至少勾选一个选项');

    // 初始化表单验证
    jQuery('#Edit').validate({
        // 给每个复选框绑定验证规则
        rules: {
            HREmployee: { require-one: true },
            ManagementEmployee: { require-one: true },
            StaffEmployee: { require-one: true }
        },
        // 合并错误提示，避免重复显示
        groups: {
            checkboxGroup: 'HREmployee ManagementEmployee StaffEmployee'
        },
        // 指定错误提示位置
        errorPlacement: function(error, element) {
            error.insertAfter('.require-one:last');
        }
    });
});

替代简化方案 #

如果不需要复杂的验证样式，可直接在提交时做检查：

jQuery(document).ready(function () {
    jQuery('#Edit').submit(function(e) {
        if ($('.require-one:checked').length === 0) {
            alert('请至少勾选一个选项');
            e.preventDefault(); // 阻止表单提交
        }
    });
});

关键修正说明 #

• 表单必须有匹配的id才能让验证器绑定生效
• 用length替代废弃的size()方法获取选中复选框数量
• 通过groups配置将多个复选框的错误提示合并为一条，优化用户体验
• 确保验证规则关联到每个复选框，触发整体检查

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