JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<form id="myFormId" name='registerForm' method='post' action='' >
    dayOnly<input type="text" id="dayOnly" class="required" name="dayOnly"/>
    <br>
    monthOnly<input type="text" id="monthOnly" class="required" name="monthOnly" />
    <br>
    yearOnly<input type="text" id="yearOnly" class="required" name="yearOnly"/>
    <br>
    emailOnly<input type="text" id="emailOnly" class="required" name="emailOnly"/>
    <input type='submit' name='Submit' value='Submit' />
</form>

CSS

input{
    font: normal 10px arial;
    padding: 3px;
    margin: 3px;
    border: 1px solid #ccc;
}

input.error { border: 1px solid #c00;}
label.error { display:none!important;}

JavaScript

$(document).ready(function() {
    $("#dayOnly, #monthOnly, #yearOnly").keydown(function(event) {
        if ( event.keyCode == 46 || event.keyCode == 8 ) {
        }
        else {
            if ((event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }   
        }
    });

    $('#myFormId').validate();
    $('#dayOnly').rules("add", {required: true, digits: true, max: 31 ,min: 1 });
    $("#monthOnly").rules("add", {required: true, digits: true, max: 12 ,min: 1 });
    $("#yearOnly").rules("add", {required: true, digits: true, max: 2000, min: 1920});
    $("#emailOnly").rules("add", {required: true, email: true });
});