JSFiddle - React, Tailwind, and code Playground

by konijn_gmail_com

HTML

<form action="#">
		<label>Date <input type='text'/> <span>I am here</span></label>
	</form>

CSS

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

JavaScript

function isValidDate(newDate) {

    newDate[1] = newDate[1]-1;
    newDate[2] = (parseInt(newDate[2]) < 50) ? 2000 + parseInt(newDate[2]) : 1900 + parseInt(newDate[2]);

    var testDate = new Date(newDate[2], newDate[1], newDate[0]);

    if (testDate.getDate()!=newDate[0] || testDate.getMonth()!=newDate[1] || testDate.getFullYear()!=newDate[2]) {
        return false;
    } else {
        return {valid : true, date : testDate};
    }

}

var sandBox = {
    init:function(params){
        this.element = $(params.element),
        this.value = params.value,
        this.mode = params.num;
    },
    isNotEmpty:function(){
        if(!this.value.length) {
           this.errorHandler(this.emptyMsg);
        } else {
            this.errorHandler(true);
            return true;
        }
    },
    errorHandler: function (msg) {
        var errorHolder = this.element.siblings('span');        
        if(msg !== true)
            errorHolder.html(msg).show();
        else errorHolder.html("").hide();
    },
    emptyMsg : "Date field should not be empty",
    digitLengthMsg : "The Length of the value should be ",
    onlyNumber : {
        num : /\D/,
        str : /^\d{2}[a-zA-Z]{3}\d{2}$/,
        mon : /[a-zA-Z]{3}/,
        msg : "Only Digits allowed"
    },
    getMonthFromString : function(mon){
        var month =  new Date(Date.parse(mon +" 01, 12")).getMonth()+1;
        month = month < 10 ? '0'+ month : month;
        return month;
    },
    isValidData : function () {

        var result =  this.onlyNumber.str.test(this.value);

        if(this.mode && result) {
            this.errorHandler(this.onlyNumber.msg)
            return false;
        }
        else if (!this.mode && result) {
            var currentMonth = this.getMonthFromString(this.value.match(this.onlyNumber.mon)[0]);
            this.value = this.value.replace(/([a-zA-Z]){3}/g, currentMonth);
            return true;
        }
        else if (this.mode && this.value.length !== 6) {
   ...