xxxxxxxxxx1
<form class="needs-validation container" novalidate>2
<div class="form-row">3
<div class="mb-3 md-form">4
<select class="mdb-select" required>5
<option value="1">USA</option>6
<option value="2">Germany</option>7
<option value="3">Poland</option>8
</select>9
<div class="invalid-feedback">Please select a country.</div>10
</div>11
</div>12
<div class="form-row mb-4">13
<div class="form-check pl-0">14
<input class="form-check-input" type="checkbox" value="" id="invalidCheck29" required>15
<label class="form-check-label" for="invalidCheck29">Agree to terms and conditions</label>16
<div class="invalid-feedback">You shall not pass!</div>17
</div>18
</div>19
<button class="btn btn-primary btn-sm btn-rounded" type="submit">Submit form</button>20
</form>1
1
xxxxxxxxxx1
(function() {2
'use strict';3
window.addEventListener('load', function() {4
// Fetch all the forms we want to apply custom Bootstrap validation styles to5
var forms = document.getElementsByClassName('needs-validation');6
// Loop over them and prevent submission7
var validation = Array.prototype.filter.call(forms, function(form) {8
form.addEventListener('submit', function(event) {9
if (form.checkValidity() === false) {10
event.preventDefault();11
event.stopPropagation();12
}13
form.classList.add('was-validated');14
}, false);15
});16
}, false);17
})();18
19
$(document).ready(function() {20
$('.mdb-select').materialSelect();21
$('.mdb-select.select-wrapper .select-dropdown').val("").removeAttr('readonly').attr("placeholder",22
"Choose your country ").prop('required', true).addClass('form-control').css('background-color', '#fff');23
}); Console errors: 0