JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<script src="http://jquery.bassistance.de/validate/additional-methods.js"></script>
<form name="deploymentUploadForm" id="deploymentUploadForm" enctype="multipart/form-data" method="post">
                        <h1>Deployment</h1>

                        <p>
                            <input type="file" name="File" accept="application/zip">
                        </p>

                        <div role="button" class="marginTop50 marginBottom">
                            <p>
                                <input type="button" id="getDeploymentList" value="Upload" class="active" >
                            </p>
                        </div>
                    </form>

JavaScript

$().ready(function () {

        // validate signup form on keyup and submit
        $("#deploymentUploadForm").validate({
            
            rules:{
                File: {
                    required: true,
                    accept: "png"
                }
            },
            
            messages:{
                File: {
                    required: "This field is mandatory!",
                    accept: "Accepts only zip file!"
                }
            }  

        });

    });


$("#getDeploymentList").click(function () {
        // Call the Send method on the hub. 
        if ($("#deploymentUploadForm").valid()) {
            alert("submitted");
            
        };
    });