JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<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>
<!--Education Health-->
<form autocomplete="off" class="educationForm" name="educationForm" id="educationForm" method="POST" >
<div class="container-fluid cloned-row1 cloned_div educat_info" id="cloned-row1">
<!-- first row-->
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3">
<span class="required-star">*</span>
<label>School Name </label>
<br/>
<div class="input-group">
<input type="text" id="txt_schName_1" name="txt_schName" class="ipt_Field required_field txt_schName " />
<p class="form-control-feedback"><i class="fa fa-search custom-mar"></i></p>
</div>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 checking_sol">
<label>School Description</label>
<br>
<input type="text" maxlength="30" class="ipt_Field school_Name" name="school_Name" id="school_Name" disabled/>
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 hsc_fid">
<label><span class="required-star">*</span>High School Avg / CGPA</label>
<br/>
<input type="text" maxlength="10" class="ipt_Field ipt_Havg required_field" id="ipt_Havg" name="ipt_Havg" />
</div>
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3"></div>
</div>
<!-- Second row-fluid-->
<div class="row">
<div class="col-xs-6 col-sm-3 col-md-3 col-lg-3 deg_fid">
<label><span class="required-star">*</span>Degree</label>
<br/>
...
CSS
.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
var count = 0;
function apply_validation() {
$(".educationForm").validate({
ignore: ".chk_Field,input[type='checkbox']:hidden",
onkeyup: false,
showErrors: function(errorMap, errorList) {
var errors = this.numberOfInvalids();
var totalCheckboxes = 0;
var phy_clpcheck = $('input[name=phy_clp]:checked').val();
var atLeastOneIsChecked = $('input[name="chk_1"]:checked').length;
if (phy_clpcheck == 'yes') {
totalCheckboxes = $('input[name="chk_1"]:checkbox').length - 1;
}
if (atLeastOneIsChecked != 0) {
totalCheckboxes = 0;
}
if (errors) {
errors += totalCheckboxes;
var message = errors === 1 ? 'You missed 1 field. It has been highlighted' : 'You have missed ' + errors + ' fields. Please fill the highlighted field before submit.';
$("#error_message").html(message);
$(".error_msge").show();
} else {
$(".error_msge").hide();
}
this.defaultShowErrors();
},
errorPlacement: function() {
return false;
},
highlight: function(element) {
if ($(element).is(':radio')) {
return false;
} else {
$(".educationForm").find('[name="' + $(element).attr('name') + '"]').addClass('errRed');
}
$(element).prevAll('label').find('span.required-star').addClass('text-error-red').removeClass('text-error-black');
},
unhighlight: function(element) {
if ($(element).is(':radio')) {
return false;
} else {
$(".educationForm").find('[name="' + $(element).attr('name') + '"]').removeClass('errRed');
}
$(element).prevAll('label').find('span.required-star').addClass('text-error-black').removeClass('text-error-red');
}
});
add_validation_for_forms();
}
function add_validation_for_forms() {
bind_validation();
}
function bind_validation() {
$(".required_field ").each(function() {
jQuery(this).rules("add", {
required: true,
});
...