JSFiddle - React, Tailwind, and code Playground

by konijn_gmail_com

HTML

<form action="#">
    <div>
        <label>Date 1
            <input id='d1' type='text' /> <span>I am here</span>
        </label>
    </div>
    <br/>
    <div>
        <label>Date 2
            <input id='d2' type='text' /> <span>I am here</span>
        </label>
    </div>
</form>

CSS

input[type=text] {
    border:1px solid lightblue;
    border-radius:5px;
    padding:10px;
}
span {
    color:red;
    display:none;
}

JavaScript

function DateHandler(elementId, _mandatory) {
    this.$dateField = $('#' + elementId);
    this.mandatory = _mandatory || false;
    this.$dateField.on('keyup focusout', this.validate.bind(this));
}

DateHandler.prototype.validate = function () {
    console.log('Pondering');
    this.error('');
    var text = this.$dateField.val().toUpperCase(), matches;
    if (text.length === 0) {
        if (mandatory) {
            this.error('Field should not be empty');
        }
        return;
    } else if (text.length == 6) {
        matches = /([0-3][0-9])([0-1][0-9])(\d\d)/.exec(text);
    } else if (text.length == 7) {
        matches = /([0-3][0-9])(\w\w\w)(\d\d)/.exec(text);
    }
    if (!matches) {
        return this.error('Field should be of format DDMMYY or DDMMMYY');
    }
    value = new Date(matches[2] + ' ' + matches[1] + " " + (matches[3] < 50 ? 20 : 19) + matches[3]);
    if (isNaN(value.getTime())) {
        return this.error('Not a valid date');
    }
    console.log(value);
};

DateHandler.prototype.error = function (message) {
    var label = this.$dateField.siblings('span');
    message ? label.html(message).show() : label.hide();
};

var dateHandler1 = new DateHandler('d1');
var dateHandler2 = new DateHandler('d2');