0

Input as array validate does not work. When I add row the validation only works for the 1st row and not for other rows.

This is my code, when I add more row. enter image description here

when I add row and hit submit button, it checks only the 1st row validation, I don't know how fix this error. 

function add_row() {
  var rowno = $("#employee_table tr").length;
  rowno = rowno + 1;
  $("#employee_table tr:last").after("<tr id='row" + rowno + "'><td><input type='text' name='name[]' placeholder='Enter Name'></td><td><input type='text' name='age[]' placeholder='Enter Age'></td><td><input type='text' name='job[]' placeholder='Enter Job'></td><td><input type='button' value='DELETE' onclick=delete_row('row" + rowno + "')></td></tr>");
}

function delete_row(rowno) {
  $('#' + rowno).remove();
}

$(function() {
  //validation rules
  $("#submitform").validate({
    rules: {
      "name[]": {
        required: true,
      },
      "age[]": {
        required: true,
      },
      "job[]": {
        required: true,
      }
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>

<form method="post" id="submitform" action="javascript:void(0)">
  <div id="wrapper">
    <div id="form_div">
      <table id="employee_table" align=center>
        <tr id="row1">
          <td><input type="text" name="name[]" placeholder="Enter Name"></td>
          <td><input type="text" name="age[]" placeholder="Enter Age"></td>
          <td><input type="text" name="job[]" placeholder="Enter Job"></td>
        </tr>
      </table>
      <input type="button" onclick="add_row();" value="ADD ROW">
      <input type="submit" name="submit_row" value="SUBMIT">
    </div>
  </div>
</form>

any help or suggestion will be appreciated

Karan Dhir
  • 731
  • 1
  • 6
  • 24
JON
  • 965
  • 2
  • 10
  • 28
  • 1
    Duplicate of https://stackoverflow.com/questions/9033184/jquery-validate-multiple-fields-with-the-same-name ? – ESP32 Oct 16 '17 at 11:43
  • 1
    Possible duplicate of [jquery validate plugin on dynamic form inputs not working](https://stackoverflow.com/questions/20561712/jquery-validate-plugin-on-dynamic-form-inputs-not-working) – Sankar Oct 16 '17 at 11:48
  • I think form validation set first time hence it won't work what you expect, you should use form validation after add row be sure before destroy validation – Ferhat BAŞ Oct 16 '17 at 11:51
  • By default the validation method only checks for the first value/ name in your case that it gets. Try changing the name of the first row to some[] instead of name[] and then add the second row. Now the validator checks for the second row's name. This proves that the validation by default works for the first name that it gets in the required form. You need to add a loop or a forEach/each function to make it run for all the specified names. – Karan Dhir Oct 16 '17 at 13:38

0 Answers0