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

15ee8f99-57ff-4f92-890c-b56153

我还有其他自定义验证器。当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习惯用语的理解有帮助(不,很认真!)

15ee8f99-57ff-4f92-890c-b56153

问题出在欧芹对单选按钮和复选框的处理方式不同。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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

验证Parsley.js中的复选框消息

来自分类Dev

Steps wizard and parsley not validating

来自分类Dev

在Parsley.js配置中设置自定义消息

来自分类Dev

澄清 Parsley.js 中的 data-parsley-`constraint`-message

来自分类Dev

姓氏的Parsley.js模式

来自分类Dev

Parsley JS-用于将选择的最小数量设置为Value的自定义验证器

来自分类Dev

Parsley远程和附加参数

来自分类Dev

Parsley远程和附加参数

来自分类Dev

Parsley验证不起作用Angular js

来自分类Dev

parsley.js-禁用maxlength验证

来自分类Dev

验证Parsley.js中的链接字段

来自分类Dev

如何使用Parsley JS验证文件输入?

来自分类Dev

Parsley.js验证文件大小?

来自分类Dev

parsley.js远程验证响应

来自分类Dev

验证Parsley.js中的链接字段

来自分类Dev

parsley.js正在验证但未提交

来自分类Dev

Parsley JS 强制字段无法验证状态

来自分类Dev

使用parsley.js添加自定义CSS类

来自分类Dev

Parsley JS - 自定义错误消息 %s 格式

来自分类Dev

在Rails 4中正确实现Parsley.js自定义远程验证器

来自分类Dev

parsley.js自定义验证器-不等于

来自分类Dev

使用Parsley.js自定义验证器检查字符串

来自分类Dev

如何使Parsley.js为一组单选按钮或复选框提供1错误?

来自分类Dev

如何使Parsley远程验证程序等待响应?

来自分类Dev

提交表单时如何防止Parsley验证

来自分类Dev

清除parsley js中的从属字段错误

来自分类Dev

parsley.js中的远程规则消息

来自分类Dev

如何覆盖Parsley JS焦点行为

来自分类Dev

延迟Parsley.js表单提交