JSFiddle - React, Tailwind, and code Playground
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>
<div> </div>
<form autocomplete="off" class="basicForm" id="basicForm" method="POST" action="#">
<input type="radio" checked="checked" value="ug" class="ug" name="edu" id="ug">
<Label>Under graduate</Label>
<input type="radio" id="pg" name="edu" value="pg" class="pg">
<Label>Post graduate</Label>
<select class="mslt_Field slt_major slt_mjr ipt_required" id="slt_mjr" name="slt_mjr">
<option value="">Please Select</option>
<option value="BA in Arts,Culture&Heritage Ma">BAACHM</option>
<option value="Bachelor of Arts in Persian">BAP</option>
<option value="Bachelor of Bus Adminstration">BBA</option>
<option value="BBA in Accounting">BBAA 2013</option>
<option value="BSc Environm. Health & Safety">BENVHS</option>
<option value="BSc in Mechanical Engineering">BMECH</option>
<option value="Bachelor of Architecture">BSARC</option>
<option value="Bachelor of Architecture">BSARC2009</option>
<option value="BSc in Business Administration">BSBA</option>
<option value="BSc in Civil Engineering">BSCE</option>
<option value="BSc in Civil Engineering">BSCE2007</option>
<option value="BSc in Civil Engineering">BSCE2014</option>
<option value="BSc in Construction Management">BSCM</option>
<option value="BSc in Construction Management">BSCM2010</option>
<option value="BSc in Electrical Engineering">BSEE</option>
<option value="BSc in Electrical Engineering">BSEE2009</option>
</select>
<select class="mslt_Field slt_mjrpg ipt_required" id="slt_mjrpg" name="slt_mjrpg">
<option value="">Please...
CSS
.error_message {
background-color: lightcoral;
color:white;
border:1px solid red;
text-align: center;
}
.errRed {
color: black !important;
border: 1px solid #EA373D !important;
}
.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();
$(".slt_mjrpg").hide();
$('input[type="radio"]').change(function () {
if ($(this).val() == 'pg') {
$(".slt_mjrpg,.slt_mjrpg1").show();
$(".slt_mjr").hide();
$('.pl_Stus1').val('');
} else {
$(this).val() == 'ug';
$(".slt_mjr,.slt_mjr1").show();
$('.slt_mjrpg1').removeClass('errRed');
$(".slt_mjrpg,.slt_mjrpg1").hide();
}
});
$('.slt_mjrpg1').change(function () {
var selectedValue = $(this).val();
$(".mjr_Descpg1").val($(this).find("option:selected").attr("value"));
$(".pl_Stus1").val('Applied');
});
$(".basicForm").validate({
//ignore: ".slt_mjrpg",
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 the highlited field before submit.';
$("#error_message").html(message);
$(".error_msge").show();
} else {
$(".error_msge").hide();
}
this.defaultShowErrors();
}
},
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: {
/*27*/
slt_mjr: "required",
/*28*/
slt_mjrpg: "required" //this validation will display only when pg radio button selected
},
});
});