JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.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/font-awesome/4.4.0/css/font-awesome.css">
<form autocomplete="off" class="basicForm" id="basicForm" method="POST" action="">

<br>


<label><span class="text-error-black">*</span>Date of Birth</label>
                                    <br/>
<div class="input-group">
 <input type="text" placeholder="MM/DD/YYYY" class="ipt_Field" id="txt_dob" name="txt_dob" />
    
<span class="form-control-feedback"><i class="fa fa-calendar"></i></span>
</div>
     <button class="btn-next" id="btn-Next" >Next</button>
    
        </form>

CSS

.errRed { background:#fff;border: 1px dotted #ea373d;color: red;}

JavaScript

$(document).ready(function(){  
$("#basicForm").validate({
                    
                errorPlacement: function(error, element){
                    
                var n = element.attr("name");
                    if (n == "txt_Fname")
                        element.attr("placeholder", "Please enter first name");
                    else if (n == "txt_lname")
                        element.attr("placeholder", "Please enter last name");	
                    else if(n=="txt_Mfname")
                        element.attr("placeholder", "Please enter Mother's Maiden first name");
                    else if(n=="txt_Mlname")
                        element.attr("placeholder","Please enter Mother's Maiden last name");
                    else if (n == "txt_Pptnum")
                        element.attr("placeholder", "Please enter your email address");
                    else if (n == "txt_Pi")
                        element.attr("placeholder", "Please enter your Place of Issue");
					
                },

                //by default validation will run on input keyup and focusout
                //set this to false to validate on submit only
                onkeyup: false,  
                 highlight: function(element) {
                // add a class "has_error" to the element 
                $(element).addClass('errRed');
                },
                unhighlight: function(element) {
                // remove the class "has_error" from the element 
                $(element).removeClass('errRed');
                },
                rules: {
                    txt_Fname: "required",
                    txt_lname: "required",
                    txt_Mfname:"required",
                    txt_Mlname:"required",
                    txt_Pptnum: "required",
                    txt_Pi:"required",
					txt_dob: "required",
                }
                });
                $("#txt_dob,#txt_iDate").datepicker({
                dateFormat: "m-dd-yy",
...