JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<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>
 <span id="error_message" class="error_msge">
                        
                    </span>
<div>&nbsp;</div>
<form autocomplete="off" class="educationForm" name="educationForm" id="educationForm" method="POST" action="#">
    <div id="collapse" class="body toggle">
        <div class="container-fluid">
            <!-- first row-fluid-->
            <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>
            <!-- Second row-fluid-->
            <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>
                   ...

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;
}
.header{
    height: 30px;
    background-color: #049F51;
    color: white;
    padding-left: 5px;    
    padding-bottom: 5px;
    font-size: 15px;
    letter-spacing: 1px;
}
.plus:before{
    content:"\f196";
    font-family: FontAwesome;
    font-size: 24px;
    color:white;
    float: right;
    padding-right: 15px;
    text-decoration: none;
}
.minus:before{
    content:"\f147";
    font-family: FontAwesome;
    font-size: 24px;
    color:white;
    padding-right: 15px;
    float: right;
    text-decoration: none;
}
.custom-file-input{
    display: inline-block;
    overflow: hidden;
    position: relative;
    padding-top: 0px;
    width: 326px;
}
.custom-file-input input[type="file"] {
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
}
.cst_select{
    color: #fff;
    background-color: #D3832C;
    border-bottom:2px solid #000;
    width: 91px;
    height: 25px;
    border-left:0px;
    border-right:0px;
    border-top:0px;
    margin-left:20px;
}

JavaScript

$(document).ready(function () {
    var $phyexpyDiv = $("#phyexpy"),
        $errorMessageDiv = $("#error_message"),
        $preview = $(".preview");
    $errorMessageDiv.hide();
    $preview.hide();
    $phyexpyDiv.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();
        }

    });
    $(".checkfile").on("change", function (e) {
        var filename = this.value;
        var files = this.files;
        var URL = window.URL || window.webkitURL;
        var url = URL.createObjectURL(files[0]);
        $(this).closest('.row').find('.preview').attr("href", url).show();
        $(this).next('.check').prop("disabled", true);
        var myfile = $(this).val();
        var ext = myfile.split('.').pop();
        $(".wrk_exp").find(".custom-file-input").addClass("errRed");
        if (ext == "pdf" || ext == "jpeg" || ext == "jpg") {
            $(this).next('.check').val(filename);
        } else {
            $(this).closest('.row').find('.preview').hide()
            alert('Invalid File Type')
            $(this).next('.check').val('');
            e.preventDefault();
        }
        if (e.currentTarget.files[0].size >= 1024 * 1024 * 2) {
            alert('File Size cannot be more than 2 MB');
            $('.ctm_widt').val('');
            e.preventDefault();
            $(this).closest('.row').find('.preview').hide()
        }
    });
    $(".wrk_clp").click(function () {
        if ($('input[name=rad_emp]:checked').val() == "yes") {
          ...