JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
 <form autocomplete="off" class="basicForm" id="basicForm" method="POST" action="">
      <span id="error_message" class="error_msge">
                        
      </span>
<p class="txt_dob">
    <label><span class="required-star">*</span>Date of Birth</label>
    <br/>
    <input type="text" placeholder="MM/DD/YYYY" class="ipt_Field" id="txt_dob" name="txt_dob" />
</p>

<p class="txt_dob">
    <label><span class="required-star">*</span>Issue Date</label>
    <br/>
    <input type="text" placeholder="MM/DD/YYYY" class="ipt_Field" id="txt_Idt" name="txt_Idt" />
</p>
     
</form>

CSS

.errRed {
    border: 1px dotted #ea373d !important;
    color: black !important;
    padding: 6px !important;
}
.text-error-red {
    color: #ea373d;
    font-size: 15px;
    padding-right: 2px;
}
.text-error-black {
    color: black;
    font-size: 11px;
    padding-right: 2px;
}
.error_msge {
    border:1px solid red;
    width: 450px;
    margin: 0px auto;
    text-align: center;
    background-color: #FFBABA!important;
    padding: 5px;
}

JavaScript

var date = new Date();
        var currentMonth = date.getMonth();
        var currentDate = date.getDate();
        var currentYear = date.getFullYear();
    $("#txt_dob,#txt_Idt").datepicker({
        maxDate: new Date(currentYear, currentMonth, currentDate),
        changeMonth: true,
        changeYear: true,
        yearRange: '-115:+0',
    })
    $("#txt_dob,#txt_Idt").datepicker({
        dateFormat: "mm-dd-yy",
        changeMonth: true,
        changeYear: true,
        showButtonPanel: true,
        yearRange: '-115:+10',
        beforeShow: function () {
        },
        
    }).on('change', function() {
        $('#txt_dob,#txt_Idt').valid();
        // triggers the validation test on change
        
    });


 $("#basicForm").validate({
         onkeyup: false,
            showErrors: function (errorMap, errorList) {
            var errors = this.numberOfInvalids();
            
            if (errors) {
                var message = errors == 1 ? 'You missed 1 field. It has been highlighted' : 'You have missed ' + errors + ' fields. Please fill before submitted.';
                $("#error_message").html(message);
                $(".error_msge").show();
            } else {
                $(".error_msge").hide();
            }
            this.defaultShowErrors();
        },
        errorPlacement: function () {
            return false;
        },
        highlight: function (element) {
            
            if ($(element).is(':radio')) {
               
            } else {
                $(element).addClass('errRed');
            }
            $(element).prevAll('label').find('span.required-star').addClass('text-error-red').removeClass('text-error-black');            
        },
        unhighlight: function (element) {
            
            if ($(element).is(':radio')) {
            } else {
                $(element).removeClass('errRed');
            }
           ...