有時候我們會需要驗證表單中的元素陣列，例如：

<form id="userDataForm" name="userDataForm" method="post" action="">
  <!-- User 1 -->
  <input type="text" id="userName1" name="userName[]" />
  <input type="text" id="userAddress1" name="userAddress[]" />
  <select id="sex1" name="sex[]">
    <option value="">- 請選擇 -</option>
    <option value="1">男</option>
    <option value="0">女</option>
  </select>
    …
  <!-- User 2 -->
  <input type="text" id="userName2" name="userName[]" />
  <input type="text" id="userAddress2" name="userAddress[]" />
  <select id="sex2" name="sex[]">
    <option value="">- 請選擇 -</option>
    <option value="1">男</option>
    <option value="0">女</option>
  </select>
    …
  <!-- User N -->
  <input type="text" id="userNameN" name="userName[]" />
  <input type="text" id="userAddressN" name="userAddress[]" />
  <select id="sexN" name="sex[]">
    <option value="">- 請選擇 -</option>
    <option value="1">男</option>
    <option value="0">女</option>
  </select>
    …
</form>

現在，使用 jQuery Validation Plugin 來驗證此表單。驗證條件為使用者必須填寫各輸入欄位，驗證語法如下：

<script src="jquery.js"></script>
<script src="jquery.validate.js"></script>
<script>
$(function() {
  $("#userDataForm").validate({
    rules: {
      "userName[]": "required",
      "userAddress[]": "required",
      "sex[]": "required"
    },
    messages: {
      "userName[]": "請輸入姓名",
      "userAddress[]": "請輸入地址",
      "sex[]": "請選擇性別"
    }
  });
});
</script>

使用以上的語法會遇到的問題是 jquery.validate.js 僅有驗證 userName 及 userAddress 陣列的第一個元素，所以我們需要對此插件做點小修改。

開啟 jquery.validate.js，可以找到名為 checkForm 的方法，內容如下：

jquery.validate.js
checkForm: function() {
  this.prepareForm();
  for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
    this.check( elements[i] );
  }
  return this.valid();
}

將此方法修改為如下的內容後，便會驗證陣列中的所有元素。

jquery.validate.js
checkForm: function() {
  this.prepareForm();
  for ( var i = 0, elements = (this.currentElements = this.elements()); elements[i]; i++ ) {
    if ( this.findByName( elements[i].name ).length != undefined &&
       this.findByName( elements[i].name ).length > 1 ) {
      for ( var j = 0; j < this.findByName( elements[i].name ).length; j++ ) {
        this.check( this.findByName( elements[i].name )[j] );
      }
    } else {
      this.check( elements[i] );
    }
  }
  return this.valid();
}

參考資料：JQuery Validation for Array of Input Elements