JSFiddle - React, Tailwind, and code Playground

by Mahadevan Sivasubramanian

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>
 <span id="error_message" class="error_msge">
                    
                </span>  
<form autocomplete="off" class="basicForm" id="basicForm" method="POST" action="#">
      <div class="choose_file pull-right" id="imageUploadForm">
                            
                            <!--<span style="color:black;text-align:center;">Add Photo</span>    -->
                            <input name="upload" class="upload" required id="upload" type="file" />
                            
                            <div class="container_image" id="upload_image"></div>
                            <label id="upload_error"></label>
						      <div class="pull-right">
							   <a class="help atooltip">
                                   <i class="fa fa-question-circle help_icon_blk icon_pos"></i></a>
						 						   </div>
						</div>
 <label>
                               <span class="required-star">*</span>First Name</label>
                          <br/>
                          <input type="text" class="ipt_Field" id="txt_Fname" name="txt_Fname" placeholder="First Name" /> 
      <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;
}
.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;
}
	<!-- photo upload-->

        .photo_Error {
            color:red;
        }
            .choose_file {
                    border: 1px solid DarkGrey;
                    color: #7f7f7f;
                    display: inline-block;
                    font: 14px Myriad Pro,Verdana,Geneva,sans-serif;
                    height: 108px;
                    margin-top: 0;
                    position: absolute;
                    right: 37px;
                    width: 138px;
                z-index: 9999;
            }
	        .btn_del {
				width: 59px;
				height: 26px;
				background-color:#1f477a !important;
				border: none;
				border-radius: 0px;
				font-size: 12px;
				z-index: 9;
				position: relative;
				top: 58px;
				right: 34px;
                color:white;
        		}
        .c {
            width:80px;
            height:30px;
            background-color:darkGrey !important;
            border:none;
        }
        #btn_send {
            background-color:#1f477a !important;
			width: 59px;
			height: 26px;
			border: none;
			border-radius: 0px;
			font-size: 12px;
			z-index: 9;
			position: relative;
			top: 58px;
			right: 24px;
			color:white;
        }
        .icon_pos{
            font-size: 16px;
            position: absolute;
            right: -17px;
            top: 0;
        }
        input.upload{
			bottom: 0;
			cursor: inherit;
			font-size: 10px;
			height: 100%;
			margin: 0;
			opacity: 0;
			outline: medium...

JavaScript

$(document).ready(function () {
    $(".error_msge").hide();
           $(".basicForm").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');
                $('#imageUploadForm').addClass('errRed');
                if($(element)[0].type=="file"){
           		   $("#upload_error").text('Please upload only jpeg').css("color","red");                             }
            }
            $(element).prevAll('label').find('span.required-star').addClass('text-error-red').removeClass('text-error-black');            
        },
            
            
        unhighlight: function (element) {
            
            if ($(element).is(':radio')) {
            } else {
                $(element).removeClass('errRed');
                $('#imageUploadForm').closest('.choose_file').removeClass('errRed');
            }
            $(element).prevAll('label').find('span.required-star').addClass('text-error-black').removeClass('text-error-red');
            
        },
        
        rules: {
            /*1*/upload:"required",
            /*3*/txt_Fname: "required"

        }
    });
    //Photo upload script starts here
	
        /*
         * Store...