jQuery Validate中showErrors多次执行，如何阻止该现象？

嘿，我之前也踩过类似的坑！你的问题根源在于每次点击提交按钮时，都在重复创建表单和初始化Validate实例，导致多个验证实例同时运行，自然会多次触发showErrors，错误信息就重复显示啦。咱们一步步捋清楚问题和解决方案：

问题分析 #

先拆解你代码里的核心问题：

• 每次点击#submit，都会用wrap给#payment套一个新的<form id="validationForm">，多次点击后DOM里会出现嵌套表单（或多个独立表单），每个表单都被初始化了Validate。
• 重复调用$('#validationForm').validate()，每次点击都会生成一个新的验证实例，这些实例都会监听表单验证事件，验证时每个实例都会执行showErrors，直接导致错误信息重复。

解决方案 #

方案1：提前定义表单结构（推荐） #

尽量不要动态创建表单，提前把表单写在HTML里，只初始化一次Validate，从根源避免重复实例的问题：

HTML结构

<form id="validationForm">
  <div id="payment">
    <!-- 这里放你的表单元素，比如NameOnCard输入框 -->
    <input type="text" name="NameOnCard" placeholder="Name on Card">
  </div>
  <button id="submit">提交</button>
</form>
<div id="divErrorContainer"></div>

JS代码

$(document).ready(function() {
  // 页面加载完成后只初始化一次Validate规则
  $('#validationForm').validate({
    rules: {
      NameOnCard: {
        required: true,
        maxlength: 29
      }
    },
    messages: {
      NameOnCard: {
        required: 'Please enter the Name as printed on your Credit Card.'
      }
    },
    // 可选：自定义showErrors确保错误容器先清空再显示
    showErrors: function(errorMap, errorList) {
      $("#divErrorContainer").empty(); // 先清空旧错误
      // 用默认方法显示错误，或者自己定制显示逻辑
      this.defaultShowErrors();
      // 如果要把错误统一放到divErrorContainer里，也可以这么写：
      // $.each(errorList, function(i, err) {
      //   $("#divErrorContainer").append(`<p>${err.message}</p>`);
      // });
    }
  });

  // 点击提交按钮时触发验证
  $("#submit").on("click", function(e) {
    e.preventDefault(); // 阻止默认提交行为
    $("#divErrorContainer").empty(); // 提前清空错误容器
    $('#validationForm').valid(); // 手动触发验证
  });
});

方案2：如果必须动态创建表单 #

如果业务需求必须动态生成表单，那就要确保每次点击前清理旧的表单和Validate实例：

$("#submit").on("click", function(){
  $("#divErrorContainer").empty();
  
  // 先移除之前存在的validationForm，避免嵌套或重复
  $("#validationForm").remove();
  
  // 重新给payment包裹新的表单
  $("#payment").wrap('<form id="validationForm" />');
  const $form = $('#validationForm');
  
  // 如果之前有Validate实例，先销毁它
  if ($form.data('validator')) {
    $form.data('validator').destroy();
  }
  
  // 初始化新的Validate实例
  $form.validate({
    rules: {
      NameOnCard: {
        required: true,
        maxlength: 29
      }
    },
    messages: {
      NameOnCard: {
        required: 'Please enter the Name as printed on your Credit Card.'
      }
    },
    showErrors: function(errorMap, errorList) {
      $("#divErrorContainer").empty();
      this.defaultShowErrors();
    }
  });
  
  // 手动触发验证
  $form.valid();
});

关键要点 #

• 永远不要在点击事件里重复初始化validate()，这会创建多个验证实例，导致重复触发回调。
• 如果动态操作表单，一定要清理旧的DOM元素和验证实例，避免残留。

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