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.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.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" class="attachForm" id="attachForm" method="POST" action="#">
  <div class="row first_row">
    <div class="col-xs-12 col-sm-3 col-md-4">
      <div class="mob_pass">
        <span class="required-star">*</span>
        <label class="ctm_fnt">Passport Photo </label>
        <br>
        <div class="custom-file-input file_ipt ">
          <input type="file" class="checkfile upd_field" name="first_num">
          <input type="text" class="txt_field ctm_widt check" 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>
      </div>
    </div>
    <div class="col-xs-6 col-sm-2 col-md-2">
      <label class="lbl_accep">Accepted ?</label>
      <br/>
      <input type="checkbox" disabled class="lbl_chk_acpt_right">
    </div>
    <div class="col-xs-6 col-sm-2 col-md-2">
      <label class="lbl_accep">Accepted by</label>
      <br/>
      <label id="txt_acceptedby" class="lbl_accept">Sufiyans</label>
    </div>
    <div class="col-xs-6 col-sm-2 col-md-2">
      <label class="lbl_accep">Accepted on</label>
      <br/>
      <label id="txt_acceptedon" class="lbl_accept">01/09/2015</label>
    </div>
    <div class="col-xs-6 col-sm-2 col-md-2">
      <label class="lbl_accepft">Document Remarks</label>
      <br/>
      <select class="slt_Field" disabled id="txt_dcmRem" style="width:135px;" name="txt_dcmRem">
        <option value=""...

CSS

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

.error_message {
  background-color: #f08080;
  color: #fff;
  border: 1px solid red;
  text-align: center
}

.errRed {
  color: #000!important;
  border: 0!important;
  padding: 6px!important;
  outline: 1px solid #EA373D!important
}

JavaScript

$(document).ready(function() {
  $('.error_msge').hide();
  $(".expand").click(function() {
    var state = $(this).children("div").hasClass("minus");
    if (state == true) {
      $(this).children("div").addClass("plus");
      $(this).children("div").removeClass("minus");
    } else {
      $(this).children("div").removeClass("plus");
      $(this).children("div").addClass("minus");
    }
    $(this).parents(".header").next("#collapse").toggle();
  });
  $(".spant:nth-child(3)").css({
    "color": "green",
    "font-weight": "600"
  });
  //var $acceptdiv = $("#accept_div");
  //$acceptdiv.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 ($(element).is('.chk_requ')) {
        $(element).addClass('errRed_chkb');
      } else {
        //$(".chk_requ").addClass('errRed');
        $(".file_ipt").addClass('errRed');
      }
      $(element).find('.required-star').addClass('text-error-red').removeClass('text-error-black');
    },
    unhighlight: function(element) {

      if ($(element).is('.chk_requ')) {
        $(element).removeClass('errRed_chkb');
      } else {
        //$(".chk_requ").removeClass('errRed');

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

    }
  });
  $(".upd_field,.chk_requ").each(function() {
    $(this).rules("add", {
      required: true,
    });
  });
  var $preview =...