如何使用jQuery Validation校验name为数组格式的表单输入字段

出现该问题的原因是jQuery Validation插件默认以name属性作为规则绑定的唯一标识，相同name的字段默认只会对第一个生效，且动态新增的表单元素不会自动继承已有的校验规则。核心解决思路是调用插件提供的*rules('add')*方法，逐个为每个表单元素绑定校验规则，具体修改步骤如下：

步骤1：调整校验初始化逻辑，批量为已有字段绑定规则 #

不要把item[]的规则直接写在validate方法的rules配置里，初始化插件完成后，选中所有name="item[]"的元素批量添加规则：

// 先初始化校验插件
$("#submit_form").validate();
// 批量为已有的item[]字段添加必填规则
$('input[name="item[]"]').each(function() {
  $(this).rules('add', {
    required: true,
    messages: {
      required: "该项为必填项"
    }
  });
});

步骤2：动态新增字段时同步绑定校验规则 #

在追加输入框的逻辑里，新的输入框插入DOM后，立刻为它添加同样的校验规则：

$("#btn1").click(function(){
  // 生成新的input元素
  const $newInput = $("<input type='text' name='item[]'><br> ");
  $(".a").append($newInput);
  // 给新添加的input绑定校验规则
  $newInput.rules('add', {
    required: true,
    messages: {
      required: "该项为必填项"
    }
  });
});

修改后完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.3/dist/jquery.validate.min.js"></script>
</head>
<body>
<form id="submit_form" method="post">
<input type='text' name='item[]' required><br>    
<input type='text' name='item[]' required> <br>       
<span class="a"></span>   
 <input type="submit" text="Submit" >
</form>
<br><br><br><br>    
<button id="btn1">Append Input Field</button>
<script>
$(function()
{
   $("#btn1").click(function(){
    const $newInput = $("<input type='text' name='item[]'><br> ");
    $(".a").append($newInput);
    $newInput.rules('add', {
      required: true,
      messages: {
        required: "该项为必填项"
      }
    });
  });
  $("#submit_form").validate();
  $('input[name="item[]"]').each(function() {
    $(this).rules('add', {
      required: true,
      messages: {
        required: "该项为必填项"
      }
    });
  });
});
</script>
</body>
</html>

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