JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.js"></script>
<form id="form1" method="post">
    <div id="div_form1">
        <input type = "text" id="txt_fname" name="txt_fname" placeholder="First Name"/><br/>
        <select id="opt_sel" name="kindlyselectthevalue">
            <option value="default">
                Select
            </option>
            <option value="banana">
                Bananana
            </option>
        </select>        
    </div>
        <div id="div_form2">
            <input type = "text" id="txt_lname" name="txt_lname" placeholder="Last Name"/><br/>      
            <button id="btn_form">Submit</button>
    </div>
</form>
<form id="form2" name="form2" method="post">
     <div id="div_form3">
        <input type = "text" id="txt_mname" name="txt_mname" />
             <button id="btn_form3">Submit</button>
    </div>
</form>

CSS

.error_field{
    background-color:red;
    color:black;
    border:1px solid red;
}
label.error{
    border:1px solid #f00;
}

JavaScript

$.validator.addMethod("valueNotEquals", function(value, element, arg){
  return arg != value;
 }, "Value must not equal arg.");

$("#div_form3").hide();

$("#form1").validate({
    rules:{
        txt_fname:{
            required:true 
        },
        txt_lname:{
            required:true 
        },
        kindlyselectthevalue: { valueNotEquals: "default" }
    },
    messages :{
        txt_fname:"Fill this f_Name",
        txt_lname:"Fill this l_Name",
        kindlyselectthevalue:"Fill this select"
    },
    submitHandler: function(form) {
        $("#form1").hide();
        $("#div_form3").show();
    }
});
$("#form2").validate({
    rules:{
        txt_mname:{
            required:true 
        },
    },
    messages :{
        txt_mname:"Fill this txt_mname"
    }
});