jQuery Validate的ignore子句中disabled选择器不生效问题

问题根源 #

jQuery Validate 内置的 required 校验规则本身存在逻辑过滤：只要字段是 disabled 或者 readonly 状态，规则会直接判定校验通过，不会执行值为空的判断。你之前修改 ignore 参数的操作只是取消了插件对字段的全局过滤，但无法影响规则内部的判断逻辑，所以配置不生效。

可行解决方案 #

这里提供两种落地方式，你可以根据业务场景选择：

方案1：自定义必填校验规则（推荐）

自己实现不判断 disabled 状态的必填规则，替代原生的 required 规则作用在需要校验的禁用字段上：

1. 先全局注册自定义校验规则

$.validator.addMethod("requiredEvenDisabled", function(value, element) {
    return $.trim(value) !== "";
}, "此字段为必填项，请等待数据加载完成后选择");

2. 替换表单校验配置中的规则

$(document).ready(function() {
    $('#myform').validate({
        ignore: [], // 取消全局字段过滤，所有字段都参与校验
        rules: {
            foo: {
                // 用自定义规则替代原生required
                requiredEvenDisabled: true
            },
            bar: {
                required: true
            }
        }
    });
});

方案2：用伪禁用状态替代原生disabled

如果不想修改校验规则，可以把原生的 disabled 属性换成自定义的禁用状态，规避规则的内置过滤：

• 给下拉加 data-disabled="true" 自定义属性，移除原生 disabled 属性
• 用CSS模拟禁用样式，同时阻止用户交互：

select[data-disabled="true"] {
    pointer-events: none;
    opacity: 0.6;
    background: #f5f5f5;
}

• AJAX请求完成后，移除data-disabled属性恢复交互即可。这种方式下字段本身不是原生禁用状态，原生的required规则可以正常生效。

补充优化建议 #

你可以在AJAX请求加载下拉数据的期间，同时禁用表单的提交按钮，加载完成后再解禁，从交互层面进一步避免用户提交未完成加载的表单，降低用户误操作的概率。

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