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/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.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="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="Select File upload" required class="upload" accept="image/jpeg" id="upload" type="file" />

    <div class="container_image" id="upload_image"></div>
    <label id="upload_error"></label>
</div>

<div class="pull-right">
    <input type="button" id="btn_del" class="btn_del" value="Delete">
        <input type="button" id="btn_send" value="Submit">
            </div>
        <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <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" /> 
        </div>
        <div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
            <label><span class="required-star">*</span> Last Name&nbsp;&nbsp;</label>

            <br/>
            <input type="text" class="ipt_Field" id="txt_lname" name="txt_lname" placeholder="Last Name"/>
        </div>
        <button class="btn-next" id="btn-Next" >Next</button>
        </form>

CSS

.photo_container{
    width: 130px!important;
    height:120px;
    background-color: #fff;
    border: 1px solid #d2d2d2;    
    position: absolute;
    right: 30px;
    font-size:20px;
    text-align: center;
    width: 130px !important;
}
<!-- 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: 118px
				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: 118px;
			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 none;
			padding: 0;
			position: relative;
			right: 2px;
            top: -2px;
			width: 100%;
        }
        #imageUploadForm {
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

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').closest('.choose_file').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');
            }
            $(element).prevAll('label').find('span.required-star').addClass('text-error-black').removeClass('text-error-red');
            
        },
        
        rules: {
			/*2*/upload:"required",
            /*3*/txt_Fname: "required",
            /*4*/txt_lname: "required"            
        },
			submitHandler: function (form) { // for demo
            alert('valid form submitted'); // for demo
            return false; // for...