jQuery validation on not working for input array

Question

I am trying to validate the inputs(name, age and job) from my input arrays using jQuery. However, my code does not validate all the empty input fields but only the first row of inputs when submitting the form. Please see the image below:

Can anyone advise what I did wrong in my javascript code?

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>

Possible duplicate of [jQuery add required to input fields](https://stackoverflow.com/questions/19166685/jquery-add-required-to-input-fields) — Surreal, Jul 12 '17 at 17:42
@JinhuaWang I have attached an image of the error I am getting. — ApplePie, Jul 12 '17 at 17:50

Jinhua Wang · Accepted Answer · 2017-07-12T18:05:31.890

1

Since you only "require" these fileds - why don't you use the required keyword instead:

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

This should be much easier than importing a plugin.

For the problems you were encountering - I suspect it is the problem of the jquery plugin. You can raise an issue here.

You can also see this stackoverflow answer for how to verify input fields.

edited Jul 12 '17 at 18:05

answered Jul 12 '17 at 18:00

Jinhua Wang

1,679
1
17
44

jQuery validation on not working for input array

1 Answers1