Question

编辑：我正在使用基础6和Abide Form Validation。

我正在尝试为网站进行自动表单验证。我所做的是在第一行创建一个表（使用jQuery Datatables库）和一系列输入。然后，用户使用“添加新行”＃39;按钮可根据需要添加更多行（具有相同的输入字段，但具有唯一的名称/ 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 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);
});

Answer 1

从Status属性，我假设您正在使用Abide Validation。

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

在以前的Foundation版本中，有一种插件方法称为data-abide，虽然它包含在插件中并不是通用的。对于基础6我们添加了一个全局reflow方法，将删除和重新应用事件侦听器，更新插件的实例数据相关信息，如添加的新选项卡或内容窗格，以及重置插件可能依赖的任何缓存数据。

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

reInit

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

1 个答案: