如何用jQuery实现姓名搜索时二选一的条件必填验证？

第一步：修改HTML单选按钮的点击事件 #

移除SearchName单选按钮onclick事件中对FirstName和LastName的markRequired()调用，因为我们将改用jQuery Validate的分组规则实现二选一必填，不再依赖HTML5原生必填属性：

<label><input type="radio" name="SearchType" value="1" id="SearchName" onclick="show('namediv'); hide('datediv'); removeRequired('StartDate'); removeRequired('EndDate')" class="search-options" /> Name</label><br />

第二步：调整jQuery Validate验证规则 #

确保已引入additional-methods.js（require_from_group方法包含在该文件中），然后修改验证规则，给FirstName和LastName设置分组必填逻辑，且仅当SearchName单选按钮被选中时生效：

$("#form").validate({
    rules: {
        FirstName: {
            maxlength: 20,
            require_from_group: {
                param: [1, '.personname'],
                depends: function(element) {
                    return $('#SearchName').is(':checked');
                }
            }
        },
        LastName: {
            maxlength: 20,
            require_from_group: {
                param: [1, '.personname'],
                depends: function(element) {
                    return $('#SearchName').is(':checked');
                }
            }
        },
        StartDate: {
            required: '#SearchDate:checked',
            date: true
        },
        EndDate: {
            required: '#SearchDate:checked',
            date: true
        }
    },
    messages: {
        FirstName: {
            maxlength: $.format("Maximum {0} characters allowed!"),
            require_from_group: "请填写名字或姓氏其中一项"
        },
        LastName: {
            maxlength: $.format("Maximum {0} characters allowed!"),
            require_from_group: "请填写名字或姓氏其中一项"
        },
        StartDate: {
            required: "Required Field",
            date: "Enter a valid date"
        },
        EndDate: {
            required: "Required Field",
            date: "Enter a valid date"
        }
    },
    // 可选配置：合并两个输入框的错误提示，避免重复显示
    groups: {
        nameGroup: "FirstName LastName"
    }
});

核心逻辑说明 #

• require_from_group: [1, '.personname']：指定带有.personname类的输入框中，至少需要填写1个
• depends函数：控制规则的生效条件，仅当SearchName单选按钮被选中时，才启用该分组必填规则
• groups配置：将FirstName和LastName的错误提示合并为一条，提升用户体验

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