Parsley.js unable to validate when two bootstrap-select in one form - parsley.js

Question

i have two bootstrap-select parsley validation works great but i have a small issue when i select one bootstrap-select and another without selecting
and i submit, both bootstrap-select shows is-valid
But second bootstrap-select should show in-valid but it doesn't show
Fiddle
<div class="form-group w-50">
<label for="edu">Brand</label>
<select name="brd" class="selectpicker form-control" id="edu" data-live-search="true" data-live-search-style="startsWith" data-parsley-required>
<option data-display="Select Brand">Select Brand</option>
<option>Audi</option>
<option>BMW</option>
<option>Chevrolet</option>
</select>
</div>
<div class="form-group w-50">
<label for="edu">model</label>
<select name="mdl" class="selectpicker form-control" id="edu" data-live-search="true" data-live-search-style="startsWith" data-parsley-required>
<option data-display="Select model">Select model</option>
</select>
</div>
$(document).ready(function (e) {
$('.selectpicker').selectpicker({
style: 'btn-light border'
});
});
$('.selectpicker').attr('data-trigger', 'change').attr('data-required', 'true');
$(document).ready(function () {
$('#adform').parsley({
errorClass: 'is-invalid text-danger',
successClass: 'is-valid',
errorsWrapper: '<div class="input-group"></div>',
errorTemplate: '<small class="form-text text-danger"></small>',
trigger: 'change',
triggerAfterFailure: 'focusout changed.bs.select'
})
.on('form:submit', function () {
$('#submiting').modal('show');
$('.st').css("display", "none");
});
});
var eduBak = {}
eduBak['Audi'] = ['A3', 'A4', 'A6', 'A7', 'A8', 'A8 L', 'A8l', 'Q3', 'Q5', 'Q7', 'R8', 'Rs 5', 'Rs 7', 'S6', 'Tt', 'other'];
eduBak['BMW'] = ['1 Series', '3 Series', '5 Series', '5 Series Gt', '6 Series', '7 Series', 'Gran Turismo', 'M3', 'M5', 'X5 M', 'M6', 'X6 M', 'Mini', 'X1', 'X3', 'X5', 'X6', 'Z4', 'other'];
eduBak['Hindustan Motors'] = ['Ambassador', 'Contessa', 'other'];
$('#edu').on('change', function () {
var model = $("#edct");
var educ = $(this).val();
var ed = eduBak[educ];
if (ed) {
model.html('<option data-display="Select Model">Select Model</option>');
for (var i = 0; i < ed.length; i++) {
model.append(new Option(ed[i], ed[i]));
}
}
$('.selectpicker').selectpicker('refresh');
});

Answer 1

The actual problem is on while you are dynamically populating the second dropdown.
You append an option with "Select Model", that makes the select is valid. Adding an empty value will fix the problem.
model.html('<option value="" data-display="Select Model">Select Model</option>');
------------------- ^^^^^^^^-----------------------------------------------------
updated fiddle