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>
<div id="wizardSteps">
    <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="submit" id="getDeploymentList" value="Upload" class="active">
            </p>
        </div>
    </form>
</div>

JavaScript

$().ready(function () {

    // validate signup form on keyup and submit
    $("#deploymentUploadForm").validate({

        rules: {
            File: {
                required: true,
                accept: "application/zip,application/octet-stream,application/x-zip,application/x-zip-compressed"
            }
        },

        messages: {
            File: {
                required: "This field is mandatory!",
                accept: "Accepts only zip file!"
            }
        }

    });

});