Insert additional content into parsley 错误

Question

我希望我的 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>'
};

Answer 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>...

之前添加

Insert additional content into parsley 错误

Insert additional content into parsley error

javascript

validation

jquery

parsley.js