将附加内容插入欧芹错误答案

【问题标题】：Insert additional content into parsley error将附加内容插入欧芹错误
【发布时间】：2015-02-09 04:32:57
【问题描述】：

我希望我的 parsley JS 验证错误呈现如下：

<span id="parsley-id-8333" class="form-error filled">
    <span class="parsley-required">
        <i class="fa fa-exclamation-triangle"></i>
        Error Message Goes Here
    </span>
</span>

如何修改此函数以将<i> 附加到我的errorTemplate 中？

window.ParsleyConfig = {
  errorsWrapper: '<span class="form-error"></span>',
  errorTemplate: '<span></span>'
};

【问题讨论】：

标签： javascript jquery validation parsley.js

【解决方案1】：

问题是：同一字段的多个错误消息会发生什么？

如果有一个三角形对你来说很好，那么通过将你的图标添加到包装器中很容易实现：

errorsWrapper: '<span class="form-error"><i class="fa fa-exclamation-triangle"></i></span>',
errorTemplate: '<span></span>'

你会得到与你正在寻找的东西兼容的东西：

<span id="parsley-id-8333" class="form-error filled">
    <i class="fa fa-exclamation-triangle"></i>
    <span class="parsley-required">
        Error Message Goes Here
    </span>
</span>

当然，除非确实存在错误，否则您不希望它出现，因此您需要一些 CSS 规则来隐藏它，例如：

.form-error:not(.filled) i { display: none; }

如果您真的在errorTemplate 中需要它，那么恐怕没有简单的方法，但是用javascript 自己添加它不会太难。您可以收听parsley:form:error 事件，搜索错误范围并在<i> 前面添加...

【讨论】：

嗨，马克。感谢您的回答。我已成功添加您的解决方案 - 但有一个问题。如果我使用 .parsley().reset() 重置表单，则 <i> 将丢失。关于如何确保 <i> 每次都显示的任何想法？
我刚刚注意到它是 Marc-André - 很抱歉用错误的名字称呼你：P
嗯，这很好，我认为这是一个错误。我会修复它，应该很容易。