jQuery表单验证：如何让错误消息前置图标持续显示？

开发者阿泽

2026-7-19

解决表单验证错误图标消失问题

你的问题根源在于errorPlacement函数仅在错误标签首次创建时执行，当用户点击字段后失焦（触发再次校验），插件会直接更新错误标签的文本内容，而不会重新调用errorPlacement，导致之前添加的图标被覆盖。以下是两种可靠的解决方法：

方法一：用CSS伪元素添加图标（推荐）

无需修改太多JS代码，通过CSS伪元素直接在错误消息前插入图标，不受DOM更新影响：

/* 假设错误标签的类名为.error */
.error::before {
  content: "\f071"; /* Font Awesome 实心感叹号的Unicode编码 */
  font-family: "Font Awesome 6 Solid"; /* 对应你使用的Font Awesome版本 */
  color: #c0392b;
  font-size: 1.3rem; /* 对应fa-lg的大小 */
  margin-right: 8px;
}

然后简化你的JS代码，去掉label.prepend部分：

errorPlacement: function(label, element) {
  label.insertAfter(element);
}

方法二：通过`showErrors`确保图标始终存在

showErrors会在每次显示错误时触发，我们可以在这里检查并添加图标：

errorPlacement: function(label, element) {
  label.insertAfter(element);
},
showErrors: function(errorMap, errorList) {
  // 执行插件默认的错误显示逻辑
  this.defaultShowErrors();
  
  // 遍历所有错误项，确保图标已添加
  $.each(errorList, function(index, error) {
    const $errorLabel = $(error.element).next('.error');
    // 如果标签里没有图标，就添加
    if (!$errorLabel.find('i.fa-triangle-exclamation').length) {
      $errorLabel.prepend('<i class="fa-solid fa-triangle-exclamation fa-lg" style="color: #c0392b;"></i> ');
    }
  });
}