How to use data-validation in multiple select options

[satyajitbho]

I cannot use data validation in multiple select options in metro4. My HTML code is

<form name="stud" id="stud" class="mt-2 stud_data" method="POST" action="stud_mo.php" enctype="multipart/form-data" data-role="validator" data-clear-invalid="5000" data-on-error-form="invalidForm" data-on-validate-form="validateForm" accept-charset="utf-8">
<div class="cell-sm-12 cell-md-12 cell-xl-6 cell-lg-6 cell-xxl-6">
<div class="form-group">
<label>Subject</label>
<select id="subje" name="subje[]" multiple data-role="select" data-validate="required" data-cls-option="fg-darkOrange" data-cls-selected-item="bg-orange fg-white" data-cls-selected-item-remover="bg-darkOrange fg-white">
<option value="" class="d-none">-Select-</option>
<option value="1" >-Select1-</option>
<option value="2" >-Select2-</option>
<option value="3" >-Select3-</option>
<option value="4" >-Select4-</option>
<option value="5" >-Select5-</option>
</select>
</div>
</div>
</form>
<script>
function invalidForm(){
var form = $(this);
form.addClass("ani-ring");
setTimeout(function(){
form.removeClass("ani-ring");
}, 1000);
}

function validateForm(){
var preloader = Metro.activity.open({
type: 'cycle'
});
$(".stud_detls").animate({
opacity: 0
});
}
</script>

**Using this I want users to select at least one option before submitting the form.

There is no action while submitting the form. Please assist me to solve this.**