JS form validation for dynamically built form in a table

Question

EDIT: I am using Foundation 6 with the Abide Form Validation.

I'm trying to do automatic form validation for a website. What I've done is create a table (using the jQuery Datatables library) with a series of inputs in the first row. Then the user uses an 'add new row' button to add more rows (with identical input fields, but unique names/ids) as needed.

Everything is working fine so far, except now when I am attempting to validate the inputs, only the first row is being checked. I'm new to JS and jQuery, so I'm picking up a lot of this stuff as I go, but I think what I'm trying to do is refresh the table's DOM element so that the newly added inputs are included in validation. I just can't seem to figure out how to get the DOM to refresh.

The actual table and scripts are complicated, so in the interest of simplicity the code below is a simplified version of what I'm working with:

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 Construction Script:

$(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 New Row Script:

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

thirtydot · Accepted Answer · 2016-07-29 12:52:15Z

1

From the data-abide attribute, I assume you are using 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.

You need to run this code each time a row is added:

Foundation.reInit('abide');

edited Jul 29, 2016 at 12:52

answered Jul 28, 2016 at 13:58

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

enpaul Over a year ago

Fantastic, thanks so much for the pointer. This isn't working for me unfortunately (I'm using Foundation 6.0.1, and this is for 5.5.3) but I'll do some digging. If I find an answer I'll post it here

thirtydot Over a year ago

@enpaul: With Foundation 6, the equivalent seems to be: Foundation.reInit('abide');. I will update my answer if that works for you. Your question would have been easier to answer if you included that you were using Foundation 6, since the answer is specific to that framework.

enpaul Over a year ago

thanks so much! that line worked perfectly. Adding Foundation.reInit('abide'); to the end of newRow();` solved the problem. I'll be sure to include details like that in future posts; I'm somewhat new here and still getting used to things, so thanks for your patience and help! Is that in the main F6 docs? If not, could you post a link to where you found that information?

thirtydot Over a year ago

@enpaul: You're welcome. The link is in my above comment. I will edit my answer to include it too.

Collectives™ on Stack Overflow

JS form validation for dynamically built form in a table

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related