JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script 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>

JavaScript

$(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();
    }
  });
});