Bootstrap 4 clear/reset 成功提交后验证

Question

我使用 Bootstrap 4 来验证 'Contact Me' 表单。

成功提交表单后，我用 $('#contactForm').trigger("reset"); 重置了它，这确实清除了输入字段，但是这些仍然是标记为已验证（验证图标和绿色边框仍然存在）。

这会导致问题，因为我仅在验证所有输入后才启用“提交”按钮，并在提交后禁用它。但是由于输入仍然标记为 'Valid'，任何字段中的任何有效条目都将启用该按钮，即使其他字段为空（所有字段都是“required” ).

请告知如何在提交表单后清除验证。谢谢！

重要提示：
我使用 Bootstrap 4。不是 3。我提到它是因为我在 SO 和其他地方浏览了数十个条目，大多数答案都参考 bootstrap.validator ，不是我的情况！
再次感谢。

我的html:

<div class="container"><br>
  <div class="row">
    <div class="col-lg-8 mx-auto">
      <form id="contactForm" class="needs-validation" novalidate="novalidate">
        <div class="control-group">
          <div class="form-group">
            Name<input  type="text" id="name" class="form-control" pattern="^[a-zA-Z{1}[a-zA-Z-9 '\-]{1,29}$" required="required">
            <div class="invalid-feedback"><a>Error...</a></div>
          </div>
          <div class="form-group">
            Mail<input type="email" id="email" class="form-control" pattern="[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}" required="required">
            <div class="invalid-feedback"><a>Error...</a></div>
          </div>
          <div class="form-group">
            Phone<input type="tel" id="phone" class="form-control" pattern="^[0-9\+]{1}[0-9\-]{9,17}$" required="required">
            <div class="invalid-feedback"><a>Error...</a></div>
          </div>
          <div class="form-group">
            Message<textarea type="text" id="message" class="form-control" rows="5" required="required"></textarea>
            <div class="invalid-feedback"><a>Error...</a></div>
          </div><br>
          <div id="phpMailerResult"></div>
          <div class="form-group text-center">
            <button id="sendMessageButton" type="submit" class="btn btn-success btn-xl text-dark font-weight-bold">Send</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

我的脚本：

$(document).ready(function() {
  // ------------------------ Actions on SUBMIT     --------------------
  $('#sendMessageButton').click(function(e) {
    e.preventDefault();
    var name = $("input#name").val();
    var email = $("input#email").val();
    var phone = $("input#phone").val();
    var message = $("textarea#message").val();
    $.ajax({
      url: "mail/contact_me.php",
      method: 'post',
      data: {
        name: name,
        phone: phone,
        email: email,
        message: message
      },
      cache: false,
      success:function() {
        $('#sendMessageButton').attr('disabled', true);
        var jsSuccess1 = "<div class='alert alert-success>";
        var jsSuccess2 = "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;";
        var jsSuccess3 = "</button>";
        var jsSuccess4 = "<strong>Message sent successfully!</strong>";
        var jsSuccess5 = "</div>";
        $('#phpMailerResult').html(jsSuccess1);
        $('#phpMailerResult > .alert-success').append(jsSuccess2, jsSuccess3, jsSuccess4, jsSuccess5);
        $('#contactForm').trigger("reset");
      },
      error:function() {
        $('#sendMessageButton').attr('disabled', true);
        var jsFail1 = "<div class='alert alert-danger>";
        var jsFail2 = "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;";
        var jsFail3 = "</button>";
        var jsFail4 = "<strong>Something went wrong...!</strong>";
        var jsFail5 = "</div>";
        $('#phpMailerResult').html(jsFail1);
        $('#phpMailerResult > .alert-danger').append(jsFail2, jsFail3, jsFail4, jsFail5);
      },
    });
    return true;
  });
  // ----------------- Validate  CONTACT form on input -----------------
  let jsContactForm = document.getElementById('contactForm');
  jsContactForm.querySelectorAll('.form-control').forEach(jsContactInput => {
    jsContactInput.addEventListener(('input'), () => {
      if (jsContactInput.checkValidity()) {
        jsContactInput.classList.add('is-valid');
        jsContactInput.classList.remove('is-invalid');
      } else {
        jsContactInput.classList.add('is-invalid');
        jsContactInput.classList.remove('is-valid');
      }
      let jsIsValid = $(jsContactForm.querySelectorAll('.form-control')).length === $(jsContactForm.querySelectorAll('.form-control.is-valid')).length;
      if (jsIsValid) {
        $('#sendMessageButton').attr('disabled', false);
      } else {
        $('#sendMessageButton').attr('disabled', true);
      }
    });
  });
});

Answer 1

我很高兴（也很自豪）自己解决了这个问题！

在脚本的 'Actions on SUBMIT' 部分中，我添加了一些行（我在以下代码片段中用 <=== 标记，以便更容易看到） .

现在提交成功后，输入字段会被清除，既不会标记为有效也不会标记为无效，因此发送联系我表格的新周期可以重新开始。

这是修改后的部分代码（其余代码未更改）：

  // ------------------------ Actions on SUBMIT     --------------------
  $('#sendMessageButton').click(function(e) {
    e.preventDefault();
    $('#phpMailerResult').show();                      // <===
    var name = $("input#name").val();
    var email = $("input#email").val();
    var phone = $("input#phone").val();
    var message = $("textarea#message").val();
    $.ajax({
      url: "mail/contact_me.php",
      method: 'post',
      data: {
        name: name,
        phone: phone,
        email: email,
        message: message
      },
      cache: false,
      success:function() {
        $('#sendMessageButton').attr('disabled', true);
        var jsSuccess1 = "<div class='alert alert-success myHeight22'>";
        var jsSuccess2 = "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;";
        var jsSuccess3 = "</button>";
        var jsSuccess4 = "<strong>Message sent successfully!</strong>";
        var jsSuccess5 = "</div>";
        $('#phpMailerResult').html(jsSuccess1);
        $('#phpMailerResult > .alert-success').append(jsSuccess2, jsSuccess3, jsSuccess4, jsSuccess5);
        $('#contactForm').trigger("reset");
        let jsContactForm = document.getElementById('contactForm');                   // <=== 
        jsContactForm.querySelectorAll('.form-control').forEach(jsContactInput => {   // <===
          jsContactInput.classList.remove('is-valid');                                // <===
          jsContactInput.classList.remove('is-invalid');                              // <===
          jsContactInput.addEventListener(('keyup'), () => {                          // <===
            $('#phpMailerResult').hide();                                             // <===
          });                                                                         // <===
        });                                                                           // <===
      },
      error:function() {
        $('#sendMessageButton').attr('disabled', true);
        var jsFail1 = "<div class='alert alert-danger myHeight22'>";
        var jsFail2 = "<button type='button' class='close' data-dismiss='alert' aria-hidden='true'>&times;";
        var jsFail3 = "</button>";
        var jsFail4 = "<strong>Something went wrong...!</strong>";
        var jsFail5 = "</div>";
        $('#phpMailerResult').html(jsFail1);
        $('#phpMailerResult > .alert-danger').append(jsFail2, jsFail3, jsFail4, jsFail5);
      },
    });
    return true;
  });

Bootstrap 4 clear/reset 成功提交后验证

Bootstrap 4 clear/reset validation after successful submit

jquery

validation

bootstrap-4

reset