Отправить форму, хотя поле обязательно для заполнения -> Пример использования Bootstrap Checkout

Question

Я создал простую форму для отправки текста.Этот текстовый ввод обязателен.

Но если я нажму на кнопку отправки, форма будет отправлена, даже если нужный текст будет пустым.

Я использовал этот пример начальной загрузки template

// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
  // 'use strict'

  window.addEventListener('load', function() {
    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.getElementsByClassName('needs-validation')

    // Loop over them and prevent 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>

Спасибо за помощь!

Answer 1

Не могли бы вы вместо этого использовать атрибут html required?

Это должен быть комментарий, но у меня недостаточно репутации.