jQuery克隆表单元素后ASP.NET Unobtrusive客户端验证失效问题问询

失效原因 #

jQuery Unobtrusive Validation 会在页面首次加载时解析所有表单验证规则，并将验证实例缓存到表单的data对象中。后续直接调用parse方法时，会默认跳过已经存在验证缓存的表单，因此新增的克隆行规则不会被识别。同时使用clone(true, true)会克隆原有行元素绑定的验证相关事件，和新的规则产生冲突，也会导致验证失效。

解决步骤 #

• 第一步：调整克隆逻辑避免事件冲突
  把clone(true, true)改成clone(false)，新增行的操作按钮（添加/删除）使用事件委托绑定，不需要随行克隆事件：

  // 全局绑定添加行事件，适配所有动态生成的按钮
  $(document).on('click', '.add-railcar', function() {
    // 行克隆逻辑
  })
  // 全局绑定删除行事件
  $(document).on('click', '.remove-railcar', function() {
    // 行删除逻辑，删除后也可以重新执行一次验证解析保证索引对应
  })
  

• 第二步：更新索引后清除旧验证缓存，重新解析规则
  完成克隆行的属性更新并插入DOM后，执行以下代码：

  const $form = $('#input-form');
  // 清除表单旧的验证缓存
  $form.removeData('validator');
  $form.removeData('unobtrusiveValidation');
  // 重新解析全表单的验证规则
  $.validator.unobtrusive.parse($form);
  

• 第三步（核对校验）：确认动态属性更新正确
  核对克隆行的以下属性值和当前索引完全匹配：
  • label的for属性
  • input的id、name属性
  • 验证提示span的data-valmsg-for属性

以上操作完成后，克隆行的客户端验证即可正常触发。

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