jquery - Parsley.js 没有为复选框上的自定义验证器设置 parsley-success/parsley-error

Question

我还有其他自定义验证器。当 Parsley 验证使用它们时，它会根据需要添加 CSS 类 parsley-success 或 parsley-error。如果only验证器是我的自定义验证器之一，它们仍然会按预期获得类。

对于这个，它不会这样做。

我得到了欧芹验证，但其他人都没有。验证否则可以正常工作:如果使用此验证器的 a 无效，我会收到正确的错误消息、表单提交失败、字段聚焦等。如果它有效，我也会得到正确的行为。但不是 CSS 类。

更新:如果我使用 data-required="true"或 data-mincheck="1"(data-group 是复选框的唯一值)，我会得到完全相同的行为。事实上，回想起来，我现在认为 CSS 可能就是我编写自己的代码的原因......

有人遇到过这个问题吗？我对欧芹有什么误解吗？

可能是因为它位于复选框输入上吗？

myrequirechecked: function (avalue, param, self) {
    try {
        console.log("$(self.element.context).is(':checked') == %s", 
            $(self.element.context).is(':checked'));

        var ok = $(self.element.context).is(':checked') ? true : false;

        return ok;
    }
    catch (ex) {
        console.log("%cmyrequirechecked %s error: %s", 'color:red', id, ex.message);
    }
}

提前感谢您对我对 jQuery 习惯用法的理解提供的任何有用的意见(不，是认真的!)

Answer 1

事实证明，Parsley 对单选按钮和复选框的处理方式不同。 CSS 类 .parsley-error 和 .parsley-success 用于装饰，而不是用于从逻辑上识别哪些元素已被验证为有效或无效。

因此:调用 options.errors.classHandler(elem,isRadioOrCheckbox) 来确定哪个元素将接收 .parsley-error 或 .parsley-success CSS 类。除了单选按钮和复选框之外的所有内容的验证都会决定谁获得这样的 CSS 类(添加了空格):

this.errorClassHandler = 
    options.errors.classHandler( element, this.isRadioOrCheckbox ) 
        || this.$element;

...但是对于单选按钮和复选框，有一个不同的分支，如下所示:

this.errorClassHandler = 
    options.errors.classHandler( element, this.isRadioOrCheckbox ) 
        || this.$element.parent();

默认情况下，options.errors.classHandler 是一个空函数，因此它“返回”未定义，并且您可以为 rb/cb 获得 this.$element.parent() ，为其他人获得 this.$element 。这就是我的原因。

就我而言，我喜欢在复选框本身上使用默认的错误状态装饰(红色轮廓)，并且我还将 CSS 类用于其他验证目的，因此我编写了一个始终返回的 classHandler 方法元素本身。

errors: {
    classHandler: function (elem, isRadioOrCheckbox) {
        return elem;
    }
},

但是我还需要从逻辑上识别已传递​​为有效的元素，而这并不是 CSS 类的真正用途；你不希望你的字段有效性标志与 UI 美观纠缠在一起。因此，另一种(或附加)方法是添加 onFieldError/onFieldSuccess 监听器。如果您愿意，他们可以根据您的喜好在复选框或单选按钮上设置错误类，但您还可以引入一些不相关的方法来轻松识别字段元素是否已验证以及它们是否通过或失败 - $(elem).data例如('parsleyValid', ParsleyField.isValid())。

listeners: {
    onFieldError: function (elem, constraints, ParsleyField) {
        //  If it's radio/checkbox, Parsley puts these on the parent by default.
        if (ParsleyField.isRadioOrCheckbox) {
            $(elem).addClass(ParsleyField.options.errorClass)
                   .removeClass(ParsleyField.options.successClass);
        }
        $(elem).data('parsleyValid', false);
    }
    , onFieldSuccess: function (elem, constraints, ParsleyField) {
        //  If it's radio/checkbox, Parsley puts these on the parent by default.
        if (ParsleyField.isRadioOrCheckbox) {
            $(elem).addClass(ParsleyField.options.successClass)
                   .removeClass(ParsleyField.options.errorClass);
        }
        $(elem).data('parsleyValid', true);
    }
}