JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<form>
<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
var sandBox = {
init:function(value, el){
this.element = $(el);
this.value = value;
},
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 6",
onlyNumber : {
reg : /\D/,
msg : "Only Digits allowed"
},
isOnlyNumber : function () {
var result = this.onlyNumber.reg.test(this.value);
if(result) {
this.errorHandler(this.onlyNumber.msg)
return false;
}
else if (this.value.length !== 6) {
this.errorHandler(this.digitLengthMsg);
return false;
}
else {
this.errorHandler(true);
return true;
}
},
dateParts : ["years", "months", "days", "hours", "minutes", "seconds", "milliseconds"],
DateIsOk:function(value) {
// var formatValue = value.match(/.{1,2}/g),
// fieldDate = parseInt(formatValue[0]),
// fieldMonth = parseInt(formatValue[1]),
// fieldYear = parseInt(formatValue[2]),
// dayobj = new Date();
var dayobj = moment(value, "DDMMYY");
if (dayobj.isValid()) {
this.errorHandler(true);
return true;
}
else {
this.errorHandler('invalid ' + this.dateParts[dayobj.invalidAt()]);
return false;
}
}
};
var dateValidator = function (e) {
var value = e.target.value;
sandBox.init(value, e.target);
if(sandBox.isNotEmpty() && sandBox.isOnlyNumber()) {
...