Question

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

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

我得到了欧芹验证，但其他都没有。验证否则正常工作：如果使用此验证器的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习语的理解（不，严肃！）

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是一个空函数，因此它“返回”未定义，你得到这个。$ element.parent（）用于rb / cb，这个。$元素用于其他所有人。这就是我的意思。

在我的情况下，我喜欢在复选框本身上使用默认的错误状态修饰（红色轮廓），我也使用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); } }

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

1 个答案: