jQuery Validate multiple fields with the same name as array

Question

I have this form with input text

But when I submit it, only the 1st field (Name 1) will be validated, not the other 2.

How can I validate all 3 fields as required with same input name?

When clicking the submit button, console log should say "all fields are valid" if they are all filled up.

Here's the fiddle. https://jsfiddle.net/o9qrdgch/4/

$(function() {
  var rules = [];
  var messages = [];
  rules['names[]'] = {
    'required': true
  };
  messages['names[]'] = {
    'required': 'This name field is required.'
  };
  $(".form-names").validate({
    ignore: '',
    rules: rules,
    messages: messages,
    onkeyup: function(element) {
      $(element).valid();
    },
    onclick: function(element) {
      $(element).valid();
    },
    onfocusout: function(element) {
      $(element).valid();
    },
    invalidHandler: function(event, validator) {
      var errors = validator.numberOfInvalids();
      if (errors) {
        validator.errorList[0].element.focus();
      }
    },
    errorPlacement: function(error, element) {
      error.insertAfter(element);
    },
    submitHandler: function(form) {
      console.log('all fields are valid')
      // form.submit();
    }
  });
});

<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script type="text/javascript" src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.2/jquery.validate.min.js"></script>

<form class="form-names">
  <div class="form-group">
    <label>Name 1</label>
    <input type="text" class="form-control" name="names[]" placeholder="Enter name">
  </div>
  <div class="form-group">
    <label>Name 2</label>
    <input type="text" class="form-control" name="names[]" placeholder="Enter name">
  </div>
  <div class="form-group">
    <label>Name 3</label>
    <input type="text" class="form-control" name="names[]" placeholder="Enter name">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>