JSFiddle - React, Tailwind, and code Playground

by Anders Kitson

HTML

<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<h1>
  Live Validation
</h1>
<form>
  <div class="date-block">
    <label class="input-labelhttps://jsfiddle.net/kitsondevelopment/bp56khsa/1/#run"><span class="day"> DD </span> / <span class="month">MM</span> / <span class="year">YYYY</span></label>
    <input type="text" pattern="\d*" class="day_month_year" id="birth_date" placeholder="DD / MM / YYYY" type="text" name="birth_date">
    <input type="hidden" name="dob_day" id="dob_day">
    <input type="hidden" name="dob_month" id="dob_month">
    <input type="hidden" name="dob_year" id="dob_year">

  </div>
</form>

<h1>
  Submit Validation
</h1>

<form>
  <div class="date-block-2">
    <label class="error"></label>
    <input type="text" pattern="\d*" class="day_month_year" id="birth_date_1" placeholder="DD / MM / YYYY" type="text" name="birth_date">
    <input type="hidden" name="dob_day" id="dob_day">
    <input type="hidden" name="dob_month" id="dob_month">
    <input type="hidden" name="dob_year" id="dob_year">
    <button class="submit_1">
      Validate
    </button>
  </div>
</form>

CSS

html {
  font-family: Helvetica, Arial;
}

h1 {
  text-align: center;
}

.date-block {
  width: 150px;
  position: relative;
  margin: 10px auto;
}

input {
  display: block;
  margin: 10px auto;
  color: grey;
  outline: none;
  font-size: 16px;
  padding: 5px;
  border: none;
}

input#birth_date_1 {
  border-top: none;
  border-left: none;
  border-right: none;

}

label {
  display: block;
  font-size: 10px;
  width: 75px;
  margin: auto;
}

button {
  display: block;
  margin: auto;
}

.bottom_error {
  border-bottom: 2px solid red;
}

JavaScript

$("button").click(function(e) {
    e.preventDefault();
  });




  $("#birth_date").mask("99 / 99 / 9999", {
    placeholder: "DD / MM / YYYY"
  });

  $("#birth_date_1").mask("99 / 99 / 9999", {
    placeholder: "DD / MM / YYYY"
  });




  $('#birth_date').keyup(function() {

    if ($(this).val() == "DD / MM / YYYY") {
      console.log("empty");
      $(".day").css("color", "grey");
      $(".month").css("color", "grey");
      $(".year").css("color", "grey");

    } else {

      var date = $(this).val(); // get the current value of the input field.
      var regex = /\d{1,4}/g;
      var result = date.match(regex);
      var dob_day = result[0];
      var dob_month = result[1];
      dob_month = parseInt(dob_month, 0);
      var dob_year = result[2];

      if (result[0]) {
        if (dob_day > 31 || dob_day == 0) {
          $(".day").css("color", "red");
          $("#birth_date").addClass("bottom_error");
        } else {
          $(".day").css("color", "green");
          $("#birth_date").removeClass("bottom_error");
        }
      }

      if (result[1]) {
        if (dob_month > 12 || dob_month == 0) {
          $(".month").css("color", "red");
          $("#birth_date").addClass("bottom_error");
        } else {
          $(".month").css("color", "green");
         	$("#birth_date").removeClass("bottom_error");
        }
      }

      if (result[2]) {
        if (dob_year > 1997 || dob_year < 1920 || dob_year == 0000) {
          $(".year").css("color", "red");
          $("#birth_date").addClass("bottom_error");
        } else {
          $(".year").css("color", "green");
          $("#birth_date").removeClass("bottom_error");
        }
      }


      var months = ["januaray", "Feburary", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];

      dob_month = months[dob_month];

      $('input[name="dob_day"]').val(dob_day);
      $('input[name="dob_month"]').val(dob_month);
     ...