xxxxxxxxxx1
<form class="needs-validation container" novalidate>2
<div class="form-row">3
<div class="col-md-4 mb-3 md-form">4
5
</div>6
<div class="col-md-4 mb-3"> <!-- FIRST SELECT -->7
<label class="mdb-main-label">Country</label>8
<select name="country" id="country" class="mdb-select md-form" required searchable="Search here..">9
<option value="0" selected="selected" disabled>Choose a country ...</option>10
<option value="1">USA</option>11
<option value="2">Germany</option>12
<option value="3">Poland</option>13
</select>14
</div>15
16
17
<div class="col-md-4 mb-3"> <!-- SECOND SELECT -->18
<label class="mdb-main-label">City</label>19
<select name="city" id="city" class="mdb-select md-form" required searchable="Search here..">20
<option value="0" selected="selected" disabled>Choose a city ...</option>21
<option value="1">NewYork</option>22
<option value="2">Paris</option>23
<option value="3">Bombay</option>24
</select>25
26
</div>27
28
29
30
<div class="col-md-4 mb-3"> <!-- THIRD SELECT -->31
<label class="mdb-main-label">Country</label>32
<select name="hobbies" id="hobbies" class="mdb-select md-form" required searchable="Search here..">33
<option value="0" selected="selected" disabled>Choose a hobby ...</option>34
<option value="1">Sport</option>35
<option value="2">TV</option>36
<option value="3">Sailing</option>37
</select>38
39
</div>40
41
42
<!-- SELECT + 1 more, etc, etc..... -->43
44
45
46
</div>47
<div class="form-row mb-4">48
<div class="col-md-4 mb-3">49
<div class="form-check pl-0">50
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>51
<label class="form-check-label" for="invalidCheck2">Agree to terms and conditions</label>52
<div class="invalid-feedback">You shall not pass!</div>53
</div>54
</div>55
56
57
58
<button class="btn btn-primary btn-rounded" type="submit">Submit form</button>59
</form>1
1
xxxxxxxxxx1
$(document).ready(function() {2
$('#country').materialSelect();3
$('#city').materialSelect();4
$('#hobbies').materialSelect();5
6
7
$('#country').materialSelect({8
validate: true,9
labels: {10
validFeedback: 'Looks good!',11
invalidFeedback: 'Please select a country.'12
}13
});14
15
$('#city').materialSelect({16
validate: true,17
labels: {18
validFeedback: 'Looks good!',19
invalidFeedback: 'Please select a city.'20
}21
});22
23
$('#hobbies').materialSelect({24
validate: true,25
labels: {26
validFeedback: 'Looks good!',27
invalidFeedback: 'Please select a hobbies.'28
}29
});30
31
32
33
34
}); // DOC35
36
37
38
39
40
function validateSelect(e) {41
const $select = $('.needs-validation select')42
e.preventDefault();43
44
$select.each((i ,el) => {45
if ($(el).val() != null) {46
$(el).parent().siblings('.valid-feedback').show();47
$(el).parent().siblings('.invalid-feedback').hide();48
} else {49
$(el).parent().siblings('.valid-feedback').hide();50
$(el).parent().siblings('.invalid-feedback').show();51
}52
});53
}54
55
$('.needs-validation select').on('change', e => validateSelect(e));56
$('.needs-validation').on('submit', e => validateSelect(e));57
58
59
Console errors: 0