使用 parsley.js 2.x 自定义错误显示答案

【问题标题】：custom error display with parsley.js 2.x使用 parsley.js 2.x 自定义错误显示
【发布时间】：2014-04-07 20:59:58
【问题描述】：

我需要在弹出窗口中显示验证错误列表。我已经使用<form data-parsley-ui-enabled="false"... 禁用了 UI 修改并订阅了“parsley:field:error”事件，我在其中收集错误信息，然后在“parsley:form:validated”上显示弹出窗口，当然仅在条件 @ 987654322@。但是我在“parsley:field:error”处理程序中获取实际错误消息时遇到问题。处理程序获取包含一个对象的单个参数，到目前为止我检查过它有几个属性：

$element - 实际的 jQuery 字段，
约束 - 约束列表
options.i18n - 它有一些原始错误消息字符串，我可以使用 n 变量进行迭代，如下所示：obj.options.i18n.<LANGUAGE_CODE>.[obj.constraints[n].name]，但它们偶尔包含占位符 (%s)，因此不适合显示到最后用户;有时会有一个数组而不是单个字符串，这完全违背了这个想法；

问题是，如果我没有禁用 UI，如何获得实际显示的错误消息？

【问题讨论】：

我知道有一个配置选项可以让我指定错误消息的目标，但这不起作用，因为弹出窗口是在验证后创建的；也就是说，在验证字段时没有这样的 DOM 元素。使用持久隐藏容器对我来说是最后的手段。
有类似需求，你知道怎么获取消息了吗？
想通了！也添加了一个答案。

标签： javascript jquery parsley.js

【解决方案1】：

解决方案

使用以下方式访问优先错误消息（即data-parsley-priority-enabled=true）：

$.listen('parsley:field:error', function(parsleyField) {
    // parsley field
    console.log(parsleyField);

    // which constraint has failed
    console.log(parsleyField.validationResult[0].assert.name);

    // the data-parsley-<constraint>-message
    console.log(parsleyField.options[parsleyField.validationResult[0].assert.name+'Message']);

    // the default constraint fail message
    console.log(window.ParsleyValidator.getErrorMessage(parsleyField.validationResult[0].assert));
});

简短说明

你快到了，消息存储在options对象本身中，消息的格式是这样的：<constraint>Message，例如：requiredMessage。

这类似于 jQuery 中的“数据属性到 js 变量转换”约定，这已在文档中提到：<parsleynamespace>-<constraint>-message 变为 <constraint>Message。

看到annotated source for ui.js后有了这个想法，查看_getErrorMessage函数。

要访问错误字段（即data-parsley-priority-enabled=false）的所有验证消息，您可以简单地遍历 parsleyField.validationResult数组：

for (i=0; i<parsleyField.validationResult.length; i++) {
    console.log(parsleyField.options[parsleyField.validationResult[i].assert.name+'Message']);
}

【讨论】：