xxxxxxxxxx1
<form class="needs-validation container" novalidate>2
<div class="form-row">3
<div class="col-md-4 mb-3 md-form">4
<label for="validationCustom012">First name</label>5
<input type="text" class="form-control" id="validationCustom012" value="" required>6
<div class="invalid-feedback">Nope!</div>7
</div>8
<div class="col-md-4 mb-3 md-form">9
<input type="text" name="date" id="date" class="form-control datepicker" value="" required/>10
<label for="date">Date</label>11
<div class="invalid-feedback">Please select a valid date.</div>12
</div>13
<div class="col-md-4 mb-3">14
<select class="mdb-select md-form" required searchable="Search here..">15
<option value="1">USA</option>16
<option value="2">Germany</option>17
<option value="3" selected>Poland</option>18
</select>19
<label class="mdb-main-label">Country</label>20
<div class="invalid-feedback check1">Please select a country.</div>21
</div>22
</div>23
<div class="form-row mb-4">24
<div class="col-md-4 mb-3">25
<div class="form-check pl-0">26
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>27
<label class="form-check-label" for="invalidCheck2">Agree to terms and conditions</label>28
<div class="invalid-feedback">You shall not pass!</div>29
</div>30
</div>31
<div class="col-md-4 mb-3">32
<select class="mdb-select md-form" searchable="Search here..">33
<option value="1">USA</option>34
<option value="2">Germany</option>35
<option value="3">Poland</option>36
</select>37
<label class="mdb-main-label">Country</label>38
</div>39
</div>40
41
<button class="btn btn-primary btn-rounded" type="submit">Submit form</button>42
</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
$('.check1').css("display","none");10
if($('.dropdown-content li.selected').length===0){11
$('.check1').css("display","block");12
}13
14
if (form.checkValidity() === false) {15
event.preventDefault();16
event.stopPropagation();17
}18
form.classList.add('was-validated');19
}, false);20
});21
}, false);22
})();23
24
$(document).ready(function() {25
$('.mdb-select-required').materialSelect(); 26
$('.mdb-select').materialSelect(); // Initialize material styling for select dropdown27
$('.datepicker').pickadate(); // Initialize datepicker28
$('.timepicker').pickatime({ twelvehour: true,});29
// Initialize timepicker30
$('.select-wrapper').click(function(){31
$('.check1').css("display","none");32
})33
$('.datepicker').removeAttr('readonly');34
$('body > form > div:nth-child(1) > div:nth-child(3) > div.select-wrapper.mdb-select.md-form > input').removeAttr('readonly').prop('required', true).addClass('form-control');35
36
}); Console errors: 0