动态新增表单输入项时jQuery validate错误提示不显示问题

问题根因 #

你遇到的问题主要由以下两个原因导致：

1. 所有动态生成的输入框都重复使用了id="fName"，DOM规范要求ID全局唯一，jQuery Validate插件依赖ID匹配元素对应的错误提示节点，重复ID会导致后续生成的输入框找不到错误提示的挂载位置。
2. 初始的rerunRules()调用放在了$(document).ready外部，执行时DOM可能还未完全加载，且每次调用rerunRules时都给所有已经绑定过规则的输入框重复添加规则，也可能引发未知异常。

修复方案 #

步骤1：修复ID重复问题

修改首个输入框的ID为唯一值：

<label><span>First name</span>
<input placeholder="First name" type="text" name="fName[0]" id="fName_0"></label>

修改动态生成HTML的逻辑，每个新增输入框都生成唯一ID：

$(document).on('click','#addmore',function(){
  numInput++;
  // 修正字符串拼接语法，同时给input设置唯一ID
  var html = '<label><span>First name</span>'+
  '<input placeholder="First name" type="text" name="fName['+numInput+']" id="fName_'+numInput+'"></label>';
  $("#frm").append(html);   
  rerunRules();         
}); 

步骤2：优化规则添加逻辑

修改rerunRules函数，避免重复给已有规则的输入框绑定规则：

function rerunRules(){
  // 只给没加过规则的输入框添加校验，加完打标记
  $('input[name^="fName"]:not(.rules-added)').each(function () {
    $(this).addClass('rules-added').rules('add', {
      required: true
    })
  });
}

步骤3：调整初始规则调用位置

把rerunRules的初始调用移到$(document).ready内部，确保DOM加载完成后再执行：

$(document).ready(function() {
  $('#frm').validate({
    highlight: function(element, errorClass) {
      $(element).fadeOut(function() {
        $(element).fadeIn();
      });
    },              
    errorPlacement: function(error, element) {
      error.appendTo(element.prev("span"));
    },
  });
  // 移到此处执行初始规则绑定
  rerunRules();
});

修改完成后所有动态生成的输入框都能正常显示错误提示。

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