Symfony v5.2项目中jQuery-validation v1.19.3结合Bootstrap v4.6输入验证的错误消息残留问题

我明白你在Symfony 5.2项目里整合jquery-validation、Bootstrap 4.6时遇到的错误消息残留问题，还希望JS和PHP端的验证显示效果保持一致——这确实是个常见的痛点，咱们一步步来解决。

问题根源分析 #

看了你的代码，主要有两个核心问题导致错误消息残留：

1. 重复创建错误容器：在errorPlacement里每次验证都会生成新的.invalid-feedback容器，没有清理旧的，导致多次验证后页面堆积多个错误元素。
2. toggle()的状态混乱：highlight和unhighlight里用toggle()来显示/隐藏错误容器，这个方法依赖元素当前的可见状态，多次触发后很容易出现状态不一致的情况，导致错误消息没被正确隐藏。

解决方案 #

下面是修改后的代码，同时兼顾和Symfony原生验证输出结构一致（Symfony默认会在表单元素附近生成.invalid-feedback容器）：

{ 
  let $app_locale = $('html')[0].lang;
  jQuery.validator.setDefaults( {
    lang: $app_locale,
    errorElement: 'span',
    errorPlacement: function(error, element) {
      // 先检查目标位置是否已有错误容器，没有再创建
      let $errorContainer = element.prev('.invalid-feedback');
      if (!$errorContainer.length) {
        $errorContainer = $([
          '<span class="invalid-feedback mt-0 mb-2 d-block">',
          '  <span class="error-box mb-0 d-block">',
          '    <span class="form-error-icon badge badge-danger text-uppercase">Error</span>',
          '  </span>',
          '</span>'
        ].join(''));
        $errorContainer.insertBefore(element);
      }
      // 确保错误消息容器是空的，再插入新的错误文本
      $errorContainer.find('.error-box').append(error.addClass("form-error-message"));
    },
    highlight: function (element, errorClass, validClass) {
      $(element).addClass('is-invalid');
      // 直接显示错误容器，不用toggle
      $(element).prev('.invalid-feedback').show();
    },
    unhighlight: function (element, errorClass, validClass) {
      $(element).removeClass('is-invalid');
      // 直接隐藏错误容器，并清空内容（避免残留旧消息）
      const $errorContainer = $(element).prev('.invalid-feedback');
      $errorContainer.hide().find('.form-error-message').remove();
    }
  });
}

关键改进点 #

• 避免重复创建容器：每次验证前先查找是否已有.invalid-feedback容器，只有不存在时才创建，防止页面堆积。
• 替换toggle()为明确的show/hide：确保高亮和取消高亮时错误容器的状态是确定的，不会出现toggle导致的状态混乱。
• 清空旧错误消息：在unhighlight时不仅隐藏容器，还移除里面的错误文本，避免下次验证时旧消息残留。
• 对齐Symfony原生验证结构：这个错误容器的结构和Symfony通过form_errors渲染的结构一致，这样JS和PHP端的验证显示效果就能完全统一了。

额外建议 #

如果你用Symfony的表单组件，还可以在Twig模板里预先渲染好.invalid-feedback容器，这样jquery-validation可以直接复用这个容器，进一步和PHP端验证对齐：

{{ form_row(form.name, {
    attr: { class: 'form-control' },
    error_attr: { class: 'form-error-message' }
}) }}
{# 预先渲染错误容器，和JS生成的结构一致 #}
<span class="invalid-feedback mt-0 mb-2 d-block">
  <span class="error-box mb-0 d-block">
    <span class="form-error-icon badge badge-danger text-uppercase">Error</span>
    {{ form_errors(form.name) }}
  </span>
</span>

这样不管是PHP端先验证还是JS端验证，错误消息的显示结构和样式都会完全一致，也能避免重复创建容器的问题。

内容的提问来源于stack exchange，提问作者Rikijs