JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/additional-methods.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<span id="error_message" class="error_msge">
                    
                </span> 
<form autocomplete="off" class="basicForm" id="basicForm" method="POST" action="education_health.html">
    <input type="text" placeholder="MM/DD/YYYY" class="ipt_Field txt_Idt ipt_required" id="txt_Idt" name="txt_Idt" />
</form>

CSS

.error_message{background-color:#f08080;color:#fff;border:1px solid red;text-align:center}
.error_msge {
    background-color: #ffbaba !important;
    border: 1px solid red;
    margin: 0 auto;
    padding: 5px;
    text-align: center;
    width: 450px;
}
.ipt_Field {
    border: 1px solid #aeaeae;
    padding: 5px;
    width: 240px;
}
.errRed {
    border: 0 none !important;
    color: #000 !important;
    outline: 1px solid #ea373d !important;
    padding: 6px !important;
}

JavaScript

$(document).ready(function () {
    
    $(".error_msge").hide();
    $(".txt_Idt").datepicker({
        changeMonth: true,
        changeYear: true,
        dateFormat: 'mm/dd/yy',
        yearRange: '-115:+1M',
        maxDate: new Date(),
        onSelect: function (dateText, inst) {
            var expDate = new Date($("#txt_Epdt").val()),
                ppt = new Date(dateText);
            if (ppt > expDate) {
                alert("Passport Issue date is greater than Expiry Date");
                $(".txt_Idt").val("");
                return;
            }
           // $("#txt_Idt").trigger("change");
        }
    });
    $('.txt_Idt').change(function (event) {
        var txtVal = $('.txt_Idt').val();
        //alert("check what" + txtVal);
        if (isDate(txtVal)) {
            $(".basicForm").validate().element(".txt_Idt");
            $(".basicForm").find(".txt_Idt").removeClass("errRed");
            event.stopImmediatePropagation();
        } else {
            alert('Kindly enter date in valid format');
            $("#txt_Idt").addClass("errRed");
            $(".txt_Idt").val("");
            $(".basicForm").validate().element(".txt_Idt");
            event.stopImmediatePropagation();
        }
    });

    function isDate(txt_Idt) {
        var currVal = txt_Idt;
        if (currVal == '') return false;

        var rxDatePattern = /^\d{2}[./-]\d{2}[./-]\d{4}$/; //Declare Regex
        var dtArray = currVal.match(rxDatePattern); // is format OK?

        if (dtArray == null) return false;

        //Checks for mm/dd/yyyy format.
        dtMonth = dtArray[3];
        dtDay = dtArray[5];
        dtYear = dtArray[1];

        if (dtMonth < 1 || dtMonth > 12) return false;
        else if (dtDay < 1 || dtDay > 31) return false;
        else if ((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31) return false;
        else if (dtMonth == 2) {
            var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear %...