Question

我正在尝试使用jQuery验证输入数组的输入（名称，年龄和作业）。但是，我的代码不会在提交表单时验证所有空输入字段，而只验证第一行输入。请看下面的图片：

有人可以在我的javascript代码中告知我做错了什么吗？

的Javascript

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

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

jQuery(document).ready(function() {
  jQuery("form[name='registration']").validate({
    rules: {
      'names[]': "required",
      'ages[]': "required",
      'jobs[]':"required",
    messages: {
      'names[]':{required : "Please enter your name"},
      'ages[]': {required : "Please enter your age"},
      'jobs[]': {required : "Please enter your job"},
    },
    submitHandler: function(form) {
      form.submit();
    }
  }
  });
});

HTML

<html>
    <header>
    </header>
        <body>
        <div id="wrapper">
            <div id="form_div">
             <form method="post" action="/store-detail/" name="registration">
             <center>
              <table id="employee_table" align=center>
               <tr id="row1">
                <td><input type="text" name="names[]" placeholder="Name"></td>
                <td><input type="text" name="ages[]" placeholder="Age"></td>
                <td><input type="text" name="jobs[]" placeholder="Job"></td>
               </tr>
              </table>
              </center>
              <input type="button" onclick="add_row();" value="ADD ROW">
              <input type="submit" name="submit_row" value="SUBMIT">
             </form>
            </div>
        </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.js"></script>
        </body>
</html>

Answer 1

因为你只需要＆＃34;需要＆＃34;这些文件 - 为什么不使用required关键字代替：

<input type='text' name='jobs[]' placeholder='Job' required>

这应该比导入插件容易得多。

对于你遇到的问题 - 我怀疑这是jquery插件的问题。您可以提出问题here。

您还可以查看此stackoverflow answer 以了解如何验证输入字段。

jQuery验证不适用于输入数组

1 个答案: