Bootstrap

Validatie van invoervelden

Validatie van invoervelden met een melding binnen het invoerveld
<form class="needs-validation" novalidate>
 <div class="form-group position-relative">
  <input type="text" class="form-control" placeholder="Woonplaats" required>
  <div class="invalid-feedback feedback-icon"><i class="fas fa-exclamation-circle"></i> Laat het ons weten waar u woont </div>
  </div>
 <button class="btn btn-primary btn-sm" type="submit">Verzenden</button>
</form>
<script>
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>
.valid-feedback.feedback-icon, .invalid-feedback.feedback-icon {
  position: absolute;
  width: auto;
  bottom: 10px;
  right: 10px;
  margin-top: 0;
  }
Bootstrap Lessons for Beginners
Validation of form fields, with a message inside the input field