jQuery Validate如何同时实现行内报错与提交后容器展示错误

需求说明 #

需要实现两种场景下的错误提示分流：

• 实时输入校验：用户输入过程中触发单字段校验时，错误信息直接展示在对应输入框后方，该部分现有功能已正常运行，效果参考：
  
• 提交全量校验：点击提交按钮触发全表单校验时，所有错误信息同步汇总展示在表单内置的.message-container消息容器中，目标效果参考：
  

现有代码问题 #

当前实现尝试在提交按钮点击事件中重复调用validate()方法，试图通过重新配置errorPlacement参数实现错误同步到消息容器的逻辑，代码如下：

$("#form_name").validate({
  highlight: function (element, errorClass, validClass) {
      $(element).addClass(errorClass).removeClass(validClass);
      $(element.form).find("input[id=" + element.id + "]")
          .addClass(errorClass);
      $(element.form).find("input[id=" + element.id + "]").siblings(".successClass").hide();

  },
  unhighlight: function (element, errorClass, validClass) {
      $(element).removeClass(errorClass).addClass(validClass);
      $(element.form).find("input[id=" + element.id + "]")
          .removeClass(errorClass);
      $(element.form).find("input[id=" + element.id + "]").siblings(".successClass").fadeIn();
  },

  rules: {
      billing_phone: {
          minlength: 9,
          number: true
      },

  },


});


$("#submit").on("click", function () {

  $("#form_name").validate({
      errorPlacement: function (error, element) {
          error.clone().insertAfter(".message-container");

      }
  });

});

该写法无法生效的核心原因：jQuery Validate 对同一个表单只会初始化一次实例，首次调用validate()后配置就会固定，后续重复调用validate()不会覆盖原有配置，仅会返回已生成的实例，因此写在点击事件里的errorPlacement逻辑根本不会执行。

正确实现代码 #

不需要重复初始化实例，利用插件自带的两个钩子即可实现需求：errorPlacement处理常规行内提示，invalidHandler（提交校验不通过回调）处理容器内的汇总错误提示，同时在字段校验通过时同步清理容器内对应错误项即可。

$("#form_name").validate({
  // 统一处理行内错误放置：保留原有输入时的后方提示逻辑
  errorPlacement: function (error, element) {
    error.insertAfter(element);
  },
  highlight: function (element, errorClass, validClass) {
    $(element).addClass(errorClass).removeClass(validClass);
    $(element.form).find(`input[id=${element.id}]`)
      .addClass(errorClass)
      .siblings(".successClass").hide();
  },
  unhighlight: function (element, errorClass, validClass) {
    $(element).removeClass(errorClass).addClass(validClass);
    $(element.form).find(`input[id=${element.id}]`)
      .removeClass(errorClass)
      .siblings(".successClass").fadeIn();
    // 字段校验通过时，同步删除消息容器内对应的错误项，避免残留
    $(".message-container").find(`[data-error-for="${element.name}"]`).remove();
  },
  rules: {
    billing_phone: {
      minlength: 9,
      number: true
    }
  },
  // 提交触发全量校验不通过时，自动汇总错误渲染到消息容器
  invalidHandler: function (event, validator) {
    const $msgContainer = $(".message-container").empty();
    // 遍历所有未通过校验的字段，生成错误项插入容器
    validator.errorList.forEach(err => {
      $(`<div data-error-for="${err.element.name}"></div>`)
        .text(err.message)
        .appendTo($msgContainer);
    });
  }
});

// 提交按钮只需要触发全量校验即可，不需要重复初始化validate
$("#submit").on("click", function () {
  $("#form_name").valid();
});

实现效果说明 #

• 输入过程中触发的单字段校验，错误依旧展示在输入框后方，和原有效果完全一致
• 点击提交触发全量校验时，所有错误会自动汇总到.message-container容器内展示
• 用户修正字段错误后，行内错误和容器内对应错误会同步消失，无残留
• 无重复初始化实例的冲突问题，符合插件官方使用规范

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