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

但是如果我在一个字段中填写了错误的信息并更改为另一个字段，则不会发生任何事情。

因此，您可能需要观看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');
}

Answer 2

与Zakaria的回答一致，我也建议添加onKeyup事件

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

这将在您键入时运行验证

Bootstrap表单验证在提交之前未验证（未显示错误）

2 个答案: