javascript - 表中动态构建表单的 JS 表单验证

Question

编辑:我正在使用 Foundation 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

In previous versions of Foundation, there was a method for plugins called reflow, though its inclusion on plugins wasn't universal. For Foundation 6 we've added a global reInit method that will remove and reapply event listeners, update the plugin's instance data for relevant information, like a new tab or content pane being added, and reset any cached data the plugin may rely on.

每次添加行时，您都需要运行此代码:

Foundation.reInit('abide');