JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.js"></script>
<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>
<div class="container-fluid">
    <div class="row-fluid">
        <div class="col-xs-12 col-sm-12 col-md-12 cnt"> <span id="error_message" class="error_msge">
                        
                    </span>

        </div>
    </div>
</div>
<form autocomplete="off" name="attachForm" class="attachForm" id="attachForm" method="POST">
    <div class="first_doc">
        <label class="ctm_fnt">Description</label>
        <br>
        <div class="custom-file-input">
            <input type="file" class="checkfile" name="file_alpha">
            <input type="text" class="txt_field ctm_widt check" name="file_name" id="file_name" placeholder="Attached File one" disabled>
            <button class="cst_select "> <i class="fa  fa-rotate-90">
                        </i> Attach</button>
        </div> <a href="#" target="_blank" class="preview">View</a>

    </div>
    <div class="secon_doc">
        <label class="ctm_fnt">Description</label>
        <br>
        <div class="custom-file-input">
            <input type="file" class="checkfile" name="file_beta">
            <input type="text" class="txt_field ctm_widt check" id="file_name" name="file_name" placeholder="Attached File" disabled>
            <button class="cst_select "> <i class="fa  fa-rotate-90">
                          </i> Attach</button>
        </div> <a href="#" target="_blank" class="preview">View</a>
    <br/>
        <input type="checkbox" id="apt_code" name="apt_code" class="chk_requ" required>I accept the Code<br/>
        <input type="checkbox" id="apt_code" name="apt_code" class="chk_requ" required> I certify that the information
            </div>
               
    <button class="...

CSS

.custom-file-input {
    display: inline-block;
    overflow: hidden;
    position: relative;
    padding-top: 0px;
}
.custom-file-input input[type="file"] {
    height: 100%;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
}
.error_message {
    background-color: lightcoral;
    color:white;
    border:1px solid red;
    text-align: center;
}
.errRed {
    color: black !important;
    border: 1px solid #EA373D !important;
    padding: 6px !important;
}
.errRed_chkb {
    color: black !important;
    outline-color: #EA373D;
    outline-style: solid;
    outline-width: thin;
}
.error_msge {
    border:1px solid red;
    width: 450px;
    margin: 0px auto;
    text-align: center;
    background-color: #FFBABA!important;
    padding: 5px;
}

JavaScript

$(document).ready(function () {
    $('.error_msge').hide();
    $(".attachForm").validate({
        ignore: false,
        onkeyup: false,
        showErrors: function (errorMap, errorList) {
            var errors = this.numberOfInvalids();

            if (errors) {
                var message = errors === 0 ? 'You missed 1 field. It has been highlighted' : 'You have missed ' + errors + ' fields. Please fill before submitted.';
                $("#error_message").html(message);
                $(".error_msge").show();
            } else {
                $(".error_msge").hide();
            }
            this.defaultShowErrors();
        },
        errorPlacement: function () {
            return false;
        },
        highlight: function (element) {

            if ($(".chk_requ").has(element).size() > 0) {

            } else {
                //$(".chk_requ").addClass('errRed');

                $('.chk_requ').addClass('errRed_chkb');
                $(".file_ipt").addClass('errRed');
            }
            $(element).find('.required-star').addClass('text-error-red').removeClass('text-error-black');
        },
        unhighlight: function (element) {

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

            } else {
                $('.chk_requ').removeClass('errRed_chkb');
                $(".file_ipt").removeClass('errRed');
            }
            $(element).find('.required-star').addClass('text-error-black').removeClass('text-error-red');

        },
        submitHandler: function (form) { // for demo
            //alert('valid form submitted'); // for demo
            return false; // for demo
        }
    });

    var $preview = $(".preview");
    $preview.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",...