如何为数组式输入元素实现jQuery Validate验证？动态行验证失效

我需要用jQuery Validate插件验证一个可动态添加的用户名输入列表，但目前动态创建的输入框无法应用验证规则，即使按照之前的方案修改后依然无效。以下是我的代码结构：

原代码 #

JavaScript #

const users$ = jQuery("form.users");
const btnAddRow = jQuery("button.btn-add-row");

btnAddRow.on('click', function(){
   const trs$ = users$.find('table tbody tr');
   const len = trs$.length;
   let html = ` <tr>
      <td><input type="text" name="user[${len}][name]" /></td>
    </tr>`;
users$.find('table tbody').append(html);

setTimeout(()=>{  // 每次添加行后执行
   setValidationRule();
})
})

var allInputBox = {};
// 页面加载时执行
setValidationRule();

function setValidationRule(){
// 遍历所有输入框
jQuery("input[name*='user[']").each(function() {
  allInputBox[jQuery(this).attr('name')] = {
    required: true // 可添加更多规则
  } 
})
}

users$.validate({
  rules: {
    "username":{
    required: true
    },
    ...allInputBox
  },
  submitHandler:function(form, event){
    event.preventDefault();
    event.stopPropagation();
    console.log("passed");
  }
})

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.5/dist/jquery.validate.min.js"></script>

<form class="users">
<input  type="name" name="username">
<button class="btn-add-row" type="button">Add Row</button>
<table>
  <tbody>
    <tr>
      <td><input type="text" name="user[0][name]" /></td>
    </tr>
     <tr>
      <td><input type="text" name="user[1][name]" /></td>
    </tr>
  </tbody>
</table>
<button>Submit</button>
</form>

问题原因 #

jQuery Validate插件在初始化时只会绑定当前存在的表单元素规则，动态添加的元素不会自动继承验证规则。原代码中仅更新allInputBox对象，但没有将新规则绑定到新添加的输入框上——因为validate()方法只在页面加载时执行一次，后续修改rules对象不会生效。

解决方案 #

修改代码，在动态添加行之后，直接给新创建的输入框调用rules("add")方法添加验证规则，无需依赖全局的allInputBox对象：

修改后的JavaScript代码 #

const users$ = jQuery("form.users");
const btnAddRow = jQuery("button.btn-add-row");

// 先初始化表单验证，仅处理静态输入框
users$.validate({
  rules: {
    "username": {
      required: true
    }
  },
  submitHandler:function(form, event){
    event.preventDefault();
    event.stopPropagation();
    console.log("passed");
  }
});

// 给页面初始存在的动态输入框添加规则
setValidationRule();

btnAddRow.on('click', function(){
   const trs$ = users$.find('table tbody tr');
   const len = trs$.length;
   let html = ` <tr>
      <td><input type="text" name="user[${len}][name]" /></td>
    </tr>`;
   const newRow = $(html);
   users$.find('table tbody').append(newRow);
   
   // 直接给新输入框绑定验证规则
   newRow.find("input").rules("add", {
     required: true,
     messages: {
       required: "此字段为必填项" // 可自定义提示文案
     }
   });
})

function setValidationRule(){
  // 遍历初始动态输入框添加规则
  jQuery("input[name*='user[']").each(function() {
    $(this).rules("add", {
      required: true,
      messages: {
        required: "此字段为必填项"
      }
    });
  });
}

说明 #

1. 先执行validate()初始化表单，仅处理静态的username输入框规则。
2. 页面加载完成后，调用setValidationRule给初始存在的动态输入框绑定规则。
3. 添加新行后，直接定位新行内的输入框，通过rules("add")方法将验证规则绑定到新元素上，确保jQuery Validate能识别并验证这些动态元素。

内容的提问来源于stack exchange，提问作者Alaksandar Jesus Gene