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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<span id="error_message" class="error_msge"></span> 
<div>&nbsp;</div>
<form autocomplete="off" class="educationForm" name="educationForm" id="educationForm" method="POST" action="#">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-12 emprad">
            <label>Do you have any physical disabilities</label>
            <input type="radio" class="phy_clp" id="phy_clp" value="yes" name="phy_clp" />Yes
            <input type="radio" class="phy_clp" checked id="phy_clp" value="no" name="phy_clp" />No</div>
    </div>
    <div id="phyexpy" class="phyexpy">
        <div class="row control-groups">
            <div class="col-xs-6 col-sm-3 col-md-2">
                <input type="checkbox" required class="chk_Field chk_field_hlt" id="chk_Vis" name="checkboxes" />
                <label>Vision</label>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2">
                <input type="checkbox" required class="chk_Field chk_field_hlt" id="chk_Hear" name="checkboxes" />
                <label>Hearing</label>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2">
                <input type="checkbox" required class="chk_Field chk_field_hlt" id="chk_Mob" name="checkboxes" />
                <label>Mobility</label>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2">
                <input type="checkbox" required class="chk_Field chk_field_hlt" id="chk_Ler" name="checkboxes" />
                <label>Learning</label>
            </div>
            <div class="col-xs-6 col-sm-3 col-md-2">
                <input type="checkbox" required class="chk_Field chk_field_hlt"...

CSS

.error_message {
    background-color: lightcoral;
    color:white;
    border:1px solid red;
    text-align: center;
}
.errRed {
    color: black !important;
    border:0px !important;
    padding: 6px !important;
    outline: 1px solid #EA373D !important;
}
.errRed_chkb {
    color: black !important;
    outline-color: #EA373D;
    outline-style: solid;
    outline-width: 1px;
}
.error_msge {
    border:1px solid red;
    width: 450px;
    margin: 0px auto;
    text-align: center;
    background-color: #FFBABA!important;
    padding: 5px;
}
.btn-next {
    width: 179px;
    height: 35px;
    background-color: #049f51;
    border-bottom: 2px solid #000;
    border-right: 0px;
    border-left: 0px;
    border-top: 0px;
    border-radius: 0px;
    color: white;
    font-family: arial;
    font-size: 17px;
}

JavaScript

$(document).ready(function () {
    var $errorMessageDiv = $("#error_message"),
        $phyexpyDiv = $("#phyexpy");
    $errorMessageDiv.hide();
    $phyexpyDiv.hide();
    $('.error_msge').hide();
    apply_validation();
    $(".phy_clp").click(function () {
        var inputValidation = $('input[name=phy_clp]:checked').val();

        if (inputValidation === "yes") {
            $phyexpyDiv.show();
            $(".phyexpy").find(".chk_field_hlt").removeClass("chk_Field");

            //$(".chk_field_hlt").addClass('errRed_chkb');
        } else if (inputValidation === "no") {
            $(".chk_field_hlt").removeClass('errRed');
            $(".phyexpy").find(".chk_field_hlt").addClass("chk_Field");
            $phyexpyDiv.hide();
        }

    });

    function apply_validation() {
        $(".educationForm").validate({
            ignore: ".chk_Field",
            onkeyup: false,
            showErrors: function (errorMap, errorList) {

                var errors = this.numberOfInvalids();

                if (errors) {
                    var message = 'You have missed ' + errors + ' fields. Please fill before submitted.';
                    $errorMessageDiv.html(message);
                    $errorMessageDiv.show();
                } else {
                    $errorMessageDiv.hide();
                }
                this.defaultShowErrors();
            },
            errorPlacement: function () {
                return false;
            },
            highlight: function (element) {
                if (element.type === "checkbox") {
                    this.findByName(element.name).addClass('errRed').removeClass('text-error-black');
                } else {
                    $(element).addClass('errRed');
                    $('#imageUploadForm').addClass('errRed');
                    $(element).prevAll('label').find('span.required-star').addClass('text-error-red').removeClass('text-error-black');
                }
            },
           ...