parsley.js 扩展错误消息文本答案

【问题标题】：parsley.js extending error message textparsley.js 扩展错误消息文本
【发布时间】：2017-05-18 15:37:55
【问题描述】：

根据设计，我在表单上方使用一个 div 来显示错误。为此，我还需要一些前缀，在每条错误消息之前，通常是来自相应标签标签的文本。

我已将此作为扩展实现，就像新功能一样，应该手动执行......但在这种情况下，我失去了默认的 ui 行为。

那么，问题是是否可以将这种行为作为欧芹的一部分来实现（通过扩展欧芹）？

【问题讨论】：

标签： javascript parsley.js

【解决方案1】：

您可以使用 errorsContainer 自定义 parsley 将错误放在哪里。可以是在您的摘要区域内创建容器的函数。

该错误容器还可能包含您填充的某种其他信息。

需要更好的错误消息系统，请参阅this issue。

【讨论】：

我可以通过破解插件而不是添加附加功能来实现这一点吗？
不确定您的意思，但如果您愿意，可以全局设置选项。
哦，我明白了，我们谈论不同的事情...如何扩展 parsley 以在每个错误文本之前显示标签？像这样label1 - field required label2 - value less than % ... 我知道我可以为每个元素单独设置错误消息，但我希望标签 + 错误消息作为默认插件行为
我认为没有简单的方法可以做到这一点，但答案已更新。
对如何实现这一点并保留用户界面行为有何建议？

【解决方案2】：

我通过扩展两个内部函数实现了所需的行为。不确定这是个好主意，但在某些特定情况下它完全符合我的需要：

(function ($) {

    function getFieldLabel(parsleyField, suffix) {
        var result = '',
            labels = $('label[for=' + parsleyField.$element.prop('id') + ']');

        suffix = suffix || '';
        if (labels.length) {
            result = labels[0].innerText + suffix;
        }

        return result;
    }

    window.ParsleyExtend = window.ParsleyExtend || {};
    window.ParsleyExtend = $.extend(window.ParsleyExtend, {
        // NB! this method replaces parsley's default `_addError`
        _addError: function _addError(name, _ref5) {
            var message = _ref5.message;
            var assert = _ref5.assert;

            this._insertErrorWrapper();
            this._ui.$errorsWrapper.addClass('filled').append($(this.options.errorTemplate).addClass('parsley-' + name).html(
                getFieldLabel(this, ' - ') + (message || this._getErrorMessage(assert))
            ));
        },

        // NB! this method replaces parsley's default `_updateError`
        _updateError: function _updateError(name, _ref6) {
            var message = _ref6.message;
            var assert = _ref6.assert;

            this._ui.$errorsWrapper.addClass('filled').find('.parsley-' + name).html(
                getFieldLabel(this, ' - ') + (message || this._getErrorMessage(assert))
            );
        }
    });

})(jQuery);

【讨论】：