JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js"></script>
 <span id="errorContainer"></span>
<form enctype="multipart/form-data" method="post" action="save.action" name="myForm" id="myForm">

    <fieldset>
        <label for="name">Name	<span class="reqd">*</span>

        </label>
        <input type="text" id="name" value="" maxlength="255">
        <label for="displayName" class="ctct-lbl">Display Name <span class="reqd">*</span>

        </label>
        <input type="text" class="ctct-disName" id="displayName" value="" maxlength="255" name="displayName">
        <input type="submit" value="Save" name="method:saveForm" id="save">
        <input type="submit" value="Cancel" name="method:cancel" id="cancel" class="cancel">
    </fieldset>
</form>

JavaScript

$("#myForm").submit(function (event) {
    //since its a demo preventing default behavior
    event.preventDefault();
    console.log("Prevent default");
}).validate({
    rules: {
        name: {
            required: true
        },
        displayName: {
            required: true
        }
    },
    submitHandler: function (form) {
        $("#errorContainer").html("");
        //do what ever you want
        alert("form submitted");
    },
    showErrors: function (errorMap, errorList) {
        $("#errorContainer").html("Please enter all required fields with an asterisk*.");
    }
});