我还有其他自定义验证器。当Parsley验证使用它们时,会在适当时添加CSS类parsley-success或parsley-error。在唯一的验证者是我的自定义验证者之一的情况下,他们仍然按预期获得类。
有了这个,它就不会那样做。
我通过了香菜验证,但没有其他验证。验证可以正常工作:如果带有此验证器的无效,我将收到正确的错误消息,表单提交失败,字段将被集中显示,等等。如果有效,我还将获得正确的行为。但不是CSS类。
更新:如果我改用data-required =“ true”或data-mincheck =“ 1”(数据组是复选框唯一的值),我将得到完全相同的行为。实际上,回想起来,我现在认为CSS事情可能就是我编写自己的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习惯用语的理解有帮助(不,很认真!)
问题出在欧芹对单选按钮和复选框的处理方式不同。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);
}
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句