javascript - 将附加内容插入欧芹错误

Question

我希望我的欧芹 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

问题是:同一字段出现多个错误消息会发生什么？

如果有一个三 Angular 形适合您，那么通过将图标添加到包装器即可轻松实现:

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