2

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

有了这个，它不会那样做。

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

更新：如果我改用 data-required="true" 或 data-mincheck="1" （数据组是复选框的唯一值），我会得到完全相同的行为。事实上，回想起来，我现在认为 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 习语的理解的任何有用输入（不，说真的！）

4

1 回答 1

3

事实证明，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);
    }
}
于 2013-11-14T16:43:49.783 回答