Bootstrap 4提交成功后清除/重置验证

Question

我使用Bootstrap 4来验证“与我联系”表单。

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

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

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

重要注意事项：我使用Bootstrap 4。不是3.我提到它是因为我在SO和其他地方浏览了数十个条目，并且大多数答案都指向bootstrap.validator 这是我的情况[[not！再次感谢。

我的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     --------------------
  $('#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;
  });