JS表单验证，用于在表中动态构建表单

编辑：我正在使用带有Abide Form Validation的Foundation 6 。

我正在尝试对网站进行自动表单验证。我要做的是创建一个表（使用jQuery Datatables库），并在第一行中添加一系列输入。然后，用户根据需要使用“添加新行”按钮添加更多行（具有相同的输入字段，但具有唯一的名称/标识）。

到目前为止，一切工作正常，除了现在当我尝试验证输入时，仅检查第一行。我是JS和jQuery的新手，所以我正在学习很多东西，但是我认为我想做的是刷新表的DOM元素，以便将新添加的输入包括在验证中。我似乎无法弄清楚如何刷新DOM。

实际的表和脚本很复杂，因此为了简单起见，下面的代码是我正在使用的代码的简化版本：

HTML：

<form data-abide novalidate action="processRequest.php" method="post" name="processRequest">
  <button class="button">Submit Request</button>
  <table id="Request" class="display">
   <thead>
      <tr>
        <th>Type*</th>
        <th>Product*</th>
        <th>Command*</th>
      </tr>
    </thead>
   <tbody>
     <tr>
        <td>
          <select name="RequestType0" id="RequestType0" required>
            <option></option>
            <option>New</option>
            <option>Resize</option>
            <option>Restyle</option>
          </select>
        </td>
        <td>
          <select name="RequestProduct0" id="RequestProduct0" required>
            <option></option>
            <option>Product1</option>                   
            <option>Product4</option>
            <option>Product3</option>
          </select>
        </td>
        <td>
          <input type="text" name="RequestCommand0" id="RequestCommand0" placeholder="Command" required/>
        </td>                                   
      </tr>
    </tbody>
  </table>
  <!-- Add new row -->
  <button class="button" id="add_row" type="button"><i class="fa fa-lg fa-plus" aria-hidden="true"></i></button>
</form>

jQuery Datatables构造脚本：

$(document).ready(function() {
  var table = $('#Request').DataTable( {
    "ordering": false, // Globally disables reordering of the table on all columns
    "bLengthChange": false, // Disable user ability to change # of results shown
    "searching": false, // Disable user search filtering field
    "info": false, // Disable info box 
    "processing": false, // Disable showing the 'processing' indicator on refresh
    "paging": false, // Disables paging
  } );
} );

添加新行脚本：

$('#add_row').on("click", function newRow() {
    var table = $('#Request').DataTable().rows();
    var len = table.rows().count();

    var cell0 = table.cell(len-1,0).node();
    var cell1 = table.cell(len-1,1).node();
    var cell2 = table.cell(len-1,2).node();

    table.row.add( [cell0.innerHTML, cell1.innerHTML, cell2.innerHTML] ).draw(true);

    table.cell(len,0).node().childNodes[1].setAttribute('name', 'RequestType' + len);
    table.cell(len,0).node().childNodes[1].setAttribute('id', 'RequestType' + len);
    table.cell(len,1).node().childNodes[1].setAttribute('name', 'RequestProduct' + len);
    table.cell(len,1).node().childNodes[1].setAttribute('id', 'RequestProduct' + len);
    table.cell(len,2).node().childNodes[1].setAttribute('name', 'RequestCommand' + len);
    table.cell(len,2).node().childNodes[1].setAttribute('id', 'RequestCommand' + len);
});