作为数组验证输入不起作用

时间:2017-10-16 11:34:46

标签: javascript jquery arrays validation

输入为数组验证不起作用。当我添加行时,验证仅适用于第1行而不适用于其他行。

这是我的代码,当我添加更多行时。 enter image description here

当我添加行并点击提交按钮时,它只检查第1行验证,我不知道如何修复此错误。

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>

我们将不胜感激任何帮助或建议

0 个答案:

没有答案