JSFiddle - React, Tailwind, and code Playground

by VVSite

HTML

<form name="sample-form">
  <input datefield oncontextmenu='return false;' type="text" name="date-1" maxlength="10" value="__.__.____" title="дд.мм.гггг"><br>
  <input datefield oncontextmenu='return false;' type="text" name="date-2" maxlength="10" value="__.__.____" title="дд.мм.гггг"><br>  
  <input type="button" value="Кнопка">
</form>

CSS

.errDateMsg {
	position: absolute;
	color: red;
	width: auto;
	text-align: center;
	font: bold 11pt arial, sans-serif;
	background: white;
	border-radius: 3px;
	box-shadow: 0px 0px 5px 0px rgba(212,137,38,1);
	padding: 2px;
	top: 30px;
}

.field-error {
  border: 1px solid red;
}

JavaScript

/* Проверка валидности поля даты */
checker = function(el, d, e) {
  var sel = el.selectionStart;
  if (sel != 10) {
    if (sel == 2 || sel == 5) {
      sel++;
    }

    var key = (e.keyCode == 0 ? e.charCode : e.keyCode);

    if (key != 37 && key != 39 && key != 9) {
      var first = d.substr(0, sel);
      sel++;
      var sec = d.substr(sel, d.length);
      el.value = first + String.fromCharCode(key) + sec;
      el.setSelectionRange(sel, sel);
    }
    if (key == 32 || key == 46) {
      var first = d.substr(0, sel - 1);
      var sec = d.substr(sel, d.length);
      el.value = first + "_" + sec;
      el.setSelectionRange(sel, sel);
    }
  }
}

/*--- Error Message ---*/
showErrMsg = function(el) {
  var elPos = el.getBoundingClientRect();
  var div = document.createElement('DIV');
  div.classList.add('errDateMsg');
  div.innerText = 'Неверная дата';
  div.style.top = (elPos.top + window.scrollY) + 'px';
  div.style.left = (elPos.left + elPos.width) + 'px';
  div.style.width = 'auto';
  el.parentNode.insertBefore(div, el);
  div.style.display = 'block';
  return div;
}

hideErrMsg = function(div) {
  div.remove();
}

/*----- Прооверка даты  -----*/
checkDate = function() {
  var dVs = document.getElementsByTagName("INPUT");
  for (var i = 0; i < dVs.length; i++) {
    var dateField = dVs[i].hasAttribute('datefield');
    if (dateField) {
      var el = dVs[i];

      el.onkeydown = function(e) {
        var key = (e.keyCode == 0 ? e.charCode : e.keyCode);
        if (key == 8) {
          e.preventDefault();
        }
      }

      el.onkeypress = function(e) {
        var key = (e.keyCode == 0 ? e.charCode : e.keyCode);
        if (isNaN(String.fromCharCode(key)) &&
          e.keyCode != 37 &&
          e.keyCode != 39 &&
          e.keyCode != 46) {
          e.preventDefault();
        } else {
          var d = this.value;

          checker(this, d, e);
        }
      }

      el.onblur = function(e) {
        if (this.value === '__.__.____')...