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="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/additional-methods.min.js"></script>
 <span id="error_message" class="error_msge">
 </span>

<form class="Form" id="Form" method="POST">
    <label>P.O.Box</label>
    <br/>
    <input type="text" class="ipt_Field txt_Add" id="txt_Po" name="txt_Po" />
    <br/>
    <label>Building</label>
    <br/>
    <input type="text" class="ipt_Field txt_Add" id="txt_Bdg" name="txt_Bdg" />
    <br/>
    <label>Street</label>
    <br/>
    <input type="text" class="ipt_Field txt_Add" id="txt_St" name="txt_St" />
    <button class="btn-next" id="btn-Next">Next</button>
</form>

CSS

.error_message {
    background-color: lightcoral;
    color:white;
    border:1px solid red;
    text-align: center;
}
.error_msge {
    border:1px solid red;
    width: 450px;
    margin: 0px auto;
    text-align: center;
    background-color: #FFBABA!important;
    padding: 5px;
}
.errRed {
    color: black !important;
    border: 1px solid #EA373D !important;
    padding: 6px !important;
}

JavaScript

$(document).ready(function () {
    $(".error_msge").hide();
    $(".Form").validate({
        ignore: false,
        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 the highlited field before submit.';
                $("#error_message").html(message);
                $(".error_msge").show();
            } else {
                $(".error_msge").hide();
            }
            this.defaultShowErrors();
        },
        errorClass: "errRed",
        errorPlacement: function () {
            return false;
        },
        highlight: function (element) {

            if ($(element).is(':radio')) {

            } else {
                $(element).addClass('errRed');
            }

        },
        unhighlight: function (element) {

            if ($(element).is(':radio')) {} else {
                $(element).removeClass('errRed');
            }
        },

        rules: {
            /*1*/
            txt_Po: {
                require_from_group: [1, ".txt_Add"]
            },
            /*2*/
            txt_Bdg: {
                require_from_group: [1, ".txt_Add"]
            },
            /*3*/
            txt_St: {
                require_from_group: [1, ".txt_Add"]
            }
        },
        submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return true; // for demo
        }
    });
});