xxxxxxxxxx1
<select class="mdb-select-1 md-form" searchable="Search here..">2
<option value="" disabled selected>Choose your country</option>3
<option value="1">USA</option>4
<option value="2">Germany</option>5
<option value="3">France</option>6
<option value="3">Poland</option>7
<option value="3">Japan</option> 8
</select>9
10
<form class="needs-validation" novalidate>11
<select class="mdb-select validate md-form" searchable="Search here..">12
<option value="" disabled selected>Choose your country</option>13
<option value="1">USA</option>14
<option value="2">Germany</option>15
<option value="3">France</option>16
<option value="4">Poland</option>17
<option value="5">Japan</option>18
</select>19
<button class="btn btn-default btn-sm">Submit</button>20
</form>1
1
xxxxxxxxxx1
// Material Select Initialization2
$(document).ready(function() {3
$('.mdb-select-1').materialSelect();4
});5
6
$(document).ready(function() {7
$('.mdb-select.validate').materialSelect({8
validate: true,9
labels: {10
validFeedback: 'Correct choice',11
invalidFeedback: 'Wrong choice'12
}13
});14
function validateSelect(e) {15
e.preventDefault();16
$('.needs-validation').addClass('was-validated');17
if ($('.needs-validation select').val() === null) {18
$('.needs-validation').find('.valid-feedback').hide();19
$('.needs-validation').find('.invalid-feedback').show();20
$('.needs-validation').find('.select-dropdown').val('').prop('placeholder', 'No countries selected')21
} else {22
$('.needs-validation').find('.valid-feedback').show();23
$('.needs-validation').find('.invalid-feedback').hide();24
}25
}26
$('.needs-validation select').on('change', e => validateSelect(e))27
$('.needs-validation').on('submit', e => validateSelect(e))28
}); Console errors: 0