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>15
<option value="1">USA</option>16
<option value="2">Germany</option>17
<option value="3">Poland</option>18
</select>19
<div class="invalid-feedback check1">Please select a country.</div>20
</div>21
</div>22
<div class="form-row mb-4">23
<div class="form-check pl-0">24
<input class="form-check-input" type="checkbox" value="" id="invalidCheck2" required>25
<label class="form-check-label" for="invalidCheck2">Agree to terms and conditions</label>26
<div class="invalid-feedback">You shall not pass!</div>27
</div>28
</div>29
<button class="btn btn-primary btn-rounded" type="submit">Submit form</button>30
</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
10
$('.check1').css("display","none");11
if($('.dropdown-content li.selected').length===0){12
$('.check1').css("display","block");13
}14
15
16
if (form.checkValidity() === false) {17
event.preventDefault();18
event.stopPropagation();19
}20
form.classList.add('was-validated');21
}, false);22
});23
}, false);24
})();25
26
$(document).ready(function() {27
$('.mdb-select').materialSelect(); // Initialize material styling for select dropdown28
$('.datepicker').pickadate(); // Initialize datepicker29
$('.timepicker').pickatime({ twelvehour: true,});30
// Initialize timepicker31
$('.select-wrapper').click(function(){32
33
$('.check1').css("display","none");34
})35
$('.datepicker').removeAttr('readonly');36
$('.mdb-select.select-wrapper .select-dropdown').val("").removeAttr('readonly').attr("placeholder", "Choose your country").prop('required', true).addClass('form-control');37
38
}); Console errors: 0