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

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

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

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错误中

1 个答案: