JSFiddle - React, Tailwind, and code Playground

by Aditya Sharat

HTML

<input type="text" id="date">
<button id="btn">Check</button>
<p class="error" id="invalid">Incorrect date</p>
<p class="error" id="below18">You must be above 18 years</p>

CSS

.error {
    display:none;
}

JavaScript

function validateDate() {
    var inputDateString = document.getElementById('date').value,
        inputDate = new Date(inputDateString),
        invalidErrorMessage = document.getElementById('invalid'),
        below18ErrorMessage = document.getElementById('below18');

    invalidErrorMessage.style.display = 'none';
    below18ErrorMessage.style.display = 'none';

    if (!inputDateString.trim() || isNaN(inputDate.valueOf())) {
        invalidErrorMessage.style.display = "block";
        return;
    }

    if (new Date().getFullYear() - inputDate.getFullYear() < 18) {
        below18ErrorMessage.style.display = "block";
        return;
    }
}

document.getElementById('btn').onclick = validateDate;