Проверка формы начальной загрузки не проверяется перед отправкой (ошибки не отображаются)

Question

Я пытаюсь проверить свою контактную форму с помощью Bootstrap 4, она хорошо проверяет ее сразу после отправки, но если я заполняю неверную информацию в поле и меняю другое поле, ничего не происходит, я хочу, чтобы он выдвигал на первый план ошибки перед отправкой форма.

здесь CODEPEN

Это моя форма:

<form id="contact-form" class="needs-validation" action="contact/send" method="POST" novalidate>
     <div class="form-group">
       <label for="#contactName">Nombre y Apellido*:</label>
       <input id="contactName" class="form-control" type="text" name="name" placeholder="Escribe..." required>
       <div class="invalid-feedback">
                        Introduzca su nombre completo
       </div>
      </div>

      <div class="form-row">
        <div class="form-group col-md-6">
          <label for="#email">Correo Electronico*:</label>
          <input id="email" class="form-control" type="email" name="email" placeholder="tucorreo@mail.com" required>
          <div class="invalid-feedback">
            Introduzca su correo electronico
          </div>
        </div>

        <div class="form-group col-md-6">
          <label for="#phone">Telefono*:</label>
          <input id="phone" class="form-control" type="tel" name="phone" minlength="11" maxlength="11" placeholder="04141112233" required>
          <div class="invalid-feedback">
             Introduzca su número de teléfono
          </div>
        </div>
      </div>

      <div class="form-group">
        <label for="course-select">Curso que le interesa*:</label>
          <select class="form-control" name="selectCourse" id="course-select">
            <option value=""></option>
            <option value="panaderia basica">Panadería Básica</option>
            <option value="pan de jamon">Pan de Jamón, cachitos y trencitas de queso</option>
            <option value="masa brioche">Masa Brioche</option>
            <option value="golfeados y quesadillas">Golfeados y quesadillas</option>
            <option value="trenza de chocolate y rosca de navidad">Trenza de Chocolate y Rosca de Navidad</option>
            <option value="hojaldre">Hojaldre</option>
            <option value="pan Campesino y focaccia">Pan Campesino y Focaccia</option>
            <option value="panes de fibra">Panes de Fibra</option>
            <option value="ninguno">Otro</option>
          </select>
       </div>

       <div class="form-group">
         <label for="message">Tu mensaje*:</label>
         <textarea name="message" class="form-control" id="message" cols="40" rows="2" minlength="50" maxlength="300" placeholder="Escribe al menos 50 caracteres..." required></textarea>
         <div class="invalid-feedback">
            Su mensaje debe tener minimo 50 caracteres.
         </div>
        </div>

        <input class="form-button" type="submit" value="Enviar">
          <p>* Campos obligatorios</p>
        </form>

это мой jQuery:

formValidation();

function formValidation(){
    var $form = $('.needs-validation');

    $form.on('submit', function(e) {
        if (this.checkValidity() === false) {
            e.preventDefault();
            e.stopPropagation();
        }
        $form.addClass('was-validated');
    });
}

Answer 1

В соответствии с ответом Закарии я бы тоже предложил добавить событие onKeyup

$form.find('input').on('keyup', function(e) {
  validate($form);
});

Это будет запускать проверку при вводе

Answer 2

, но если я введу неверную информацию в поле и перейду на другое поле, ничего не произойдет.

Так что вам может понадобиться наблюдать действие blur, добавьте еще одно событие для этого:

formValidation();

function formValidation() {
  var $form = $('.needs-validation');

  $form.on('submit', function(e) {
    validate(e, $form);
  });
  $form.find('input, select, textarea').on('blur', function(e) {
    validate(e, $(this));
  });
}

function validate(e, elem) {
  if (elem[0].checkValidity() === false) {
    e.preventDefault();
    e.stopPropagation();
  }
  elem.addClass('was-validated');
}