Q:

jQuery validation on not working for input array

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>

A:

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.

