JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<form>
Only valid entry is empty or 2 characters:<br />
<input name="StartDate" type="text" /><br />
<input type="submit" value="Submit Me" />
</form>

CSS

.error { color: red; }

JavaScript

function isDelayed() { return false; }
function isValidDate(val) {return val.length == 2; }

$.validator.addMethod(
    "dateRU",
    function(value, element) {
        return this.optional(element) || isValidDate($.trim(value));
    },
    "Date is incorrect"
);

$("form").validate({
    rules: {
        StartDate: {
            required: isDelayed,
            dateRU: true
        }
    },
    submitHandler: function() {
        alert("Valid Form");
    },
    invalidHandler: function() {
        alert("Invalid Form");
    },
    debug: true
});