JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.13.1/additional-methods.js"></script>
<form id="uploadPhotoForm" enctype="multipart/form-data" method="POST">
            <table class= "uploadPhotoTable">
                    <tr>
                        <td>Photo</td>
                        <td>:</td>
                        <td><input class="field" type="file" name="files[]" id="upload_photo" align='right' multiple /></td>
                    </tr>
            </table>

</form>

JavaScript

$('#uploadPhotoForm').validate({
    rules: {
      'files[]': {
      required: true,
      extension: "png"
    }
    },
    messages:{
        'files[]':{
           required : "Please upload atleast 1 photo",
           extension:"Only png file is allowed!"
        }

    }



  });