JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<form class="cmxform" id="mainform" method="post" action="">
    <input id="TbxConfirmationNumber" name="TbxConfirmationNumber" type="text" />
    <input id="TbxOrderEmail" name="TbxOrderEmail" type="email" />
    <input id="TbxBillingZip" name="TbxBillingZip" type="text" />
    <input type="submit" val="Submit" />
</form>

CSS

input {
    display: block;
    margin-bottom: 1em;
}
input.inline-error {
    border: 1px solid red;
}
label.inline-error {
    color: red;
}

JavaScript

$(document).ready(function () {
    $.validator.addMethod("zipcode", function (value, element) {
        return this.optional(element) || /[^0-9]+/ig.test(value);
    }, 'Please enter a valid zip code.');

    $("#mainform").validate({
        rules: {
            TbxConfirmationNumber: {
                maxlength: 16,
                minlength: 12,
                required: true
            },
            TbxOrderEmail: {
                email: true,
                required: true,
                maxlength: 255
            },
            TbxBillingZip: {
                maxlength: 5,
                number: true,
                required: true
            }
        },
        messages: {
            TbxConfirmationNumber: {
                maxlength: "maxlength TbxConfirmationNumber",
                minlength: "minlength TbxConfirmationNumber",
                required: "required TbxConfirmationNumber"
            },
            TbxOrderEmail: {
                email: "email TbxOrderEmail",
                required: "required TbxOrderEmail",
                maxlength: "maxlength TbxOrderEmail"
            },
            TbxBillingZip: {
                required: "required TbxBillingZip",
                maxlength: "maxlength TbxBillingZip",
                number: "numericOnly TbxBillingZip",
            }
        },
        onkeyup: false,
        focusCleanup: true,
        errorClass: "inline-error",
        onfocusout: function (element) {
            this.element(element);
        }
    });

    $("#mainform").on("submit.validate", function (evt) {
        var isValid = $(this).valid();
        console.log(isValid);
        if (!isValid) {
            /*$("input").each(function() {
                $(this).trigger("focus").trigger("blur");
            });*/
            evt.preventDefault();
        }
    });
    
});