I devised a straightforward form for entering text. The input of this text is mandatory.
However, when I click on the submit button, the form gets submitted even if the required text field is empty.
I took inspiration from this particular Bootstrap template.
// Here's an example starter JavaScript code that disables form submissions with invalid fields
(function() {
// 'use strict'
window.addEventListener('load', function() {
// Get all the forms we want to style with custom Bootstrap validation
var forms = document.getElementsByClassName('needs-validation')
// Loop through them and stop submission
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)
}())
$("#suche").submit(function(event) {
alert("Handler for .submit() called.");
event.preventDefault();
});<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div id="karte1" class="col-md-7 order-md-1">
<form class="needs-validation" id="suche" novalidate>
<div class="mb-3">
<div class="input-group">
<input type="text" class="form-control" id="username2" required>
<div class="input-group-append">
<button type="submit" class="btn btn-outline-secondary">
submit
</button>
</div>
<div class="invalid-feedback" style="width: 100%;">
Valid text is required.
</div>
</div>
</div>
</form>
</div>
<!-- Karte1 -->
</div>
<!-- row -->
</div>
<!-- container -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>Appreciate your assistance!