Jquery 验证插件禁用属性错误

Question

我有一组 html 输入：复选框项目。其中一项具有 disabled 属性。 预期的行为是 jquery 验证插件将忽略具有 disabled 属性的 input，但将处理未禁用的其他元素的验证。

<input type="checkbox" name="example[]" value="1" minlength="1" required="required" disabled="disabled" />
<input type="checkbox" name="example[]" value="2" minlength="1" required="required" />
<input type="checkbox" name="example[]" value="3" minlength="1" required="required" />

我创建了一个活生生的例子来演示这种行为。 http://jsfiddle.net/cVMBA/24/

预期的行为是在这种情况下至少选择了一个复选框。如果不是，则应该出现错误。 虽然我可以看到这种行为真的很奇怪。如果您查看控制台，您可以看到一开始 errorPlacement 函数被触发，然后 unhighlight 函数被触发。所以这里的问题是没有显示错误。

当您删除属性 disabled="disabled" 时，插件将按预期工作。 有什么想法，或者可能是一个 hack 来覆盖这种行为？

Answer 1

该插件在 disabled="disabled" 属性方面运行良好，如下所示：http://jsfiddle.net/4fShN/

关于您的代码：

$('#test_validate').validate({
    ignore : [],
    unhighlight : function(element, errorClass, validClass){
         $('#test_validate').removeClass('error-highlighted');
    },
    errorPlacement: function(error, element) {           
        $('#test_validate').addClass('error-highlighted').find('.error-div').text('Select radio button');
    },
    submitHandler: function(form) {
            alert('form ok');
    }
});

您缺少highlight 回调函数，它是unhighlight 回调的补充。您应该注意errorPlacement 仅在最初 放置错误label 元素时触发。如果您想与错误一起切换，那么这就是 highlight 和 unhighlight 函数的用途。

此外，您的代码将类应用于$('#test_validate')，其中包含<form> 元素的id。通常，您可以使用包含的 element 参数从出现错误的 <input> 元素中应用和删除该类。

    highlight : function(element, errorClass, validClass){
        $(element).addClass('error-highlighted');
    },
    unhighlight : function(element, errorClass, validClass){
        $(element).removeClass('error-highlighted');
    },

为了使事情更简单，可以通过简单地定义validClass 和errorClass 选项来删除上面的代码。为什么它们可以被移除？因为上面这两个功能与默认插件行为基本相同。

errorClass: "error-highlighted",
validClass: "valid"

查看文档：http://jqueryvalidation.org/validate