JSFiddle - React, Tailwind, and code Playground

by digitalextremist

HTML

<label for="reservationDate">Date of reservation (DD/MM/YYYY):</label>
<input type="text" id="date" name="date" onblur="javascript:validateDate('date')">
<span id="dateError" style="display: none;">
    Please enter your date of reservation in this format DD/MM/YYYY
</span>

JavaScript

function validateDate(x) {
   var re = /^(\d{1,2})[-/.](\d{1,2})[-/.](\d{4})$/;
   var entered = new Date(document.getElementById(x).value);
   var today = new Date();
   if( entered > today ) {
        document.getElementById(x).style.background ='#ccffcc'; 
        document.getElementById(x + 'Error').style.display = "none"; 
        return true;
   } else{ 
        document.getElementById(x).style.background ='#e35152'; 
        document.getElementById(x + 'Error').style.display = "block"; 
        return false; 
   }
}