在表中动态构建表单的JS表单验证

Question

编辑：我正在使用基金会6与Abide Form Validation。

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

到目前为止，一切正常，除了现在当我试图验证输入，只有第一行被检查。我是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数据表构建脚本：

$(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); 
}); 

Answer 1

从data-abide属性，我假设你正在使用Abide Validation。

http://foundation.zurb.com/sites/docs/javascript.html#adding-content-to-plugins

在基金会的早期版本中，有一个名为reflow插件 的方法，虽然其列入插件是不是普遍的。对于 Foundation 6，我们添加了全局的reInit方法，该方法将删除和 重新应用事件侦听器，更新插件的实例数据为 相关信息，如添加新选项卡或内容窗格，以及重置插件可能会缓存的任何数据依靠。

你需要每次添加一行时运行此代码：

Foundation.reInit('abide');