如何通过Bootstrap 4自定义表单验证来防止AJAX按钮提交后页面重新加载

时间:2019-05-12 18:48:32

标签: ajax bootstrap-4

我的表单通过引导程序自定义表单验证(https://getbootstrap.com/docs/4.3/components/forms/#custom-styles)按照脚本进行了验证,并且提交后,我的警报消息可以完美显示,但是自从我的网站重新加载以来,它的显示时间仅为一秒钟。我不希望该网站重新加载。它只应该显示我的小警报。

我很确定这与参数“ false”或“ return false”的缺失或错误有关。但是我不知道如何使它工作。

(function() {
  window.verifyRecaptchaCallback = function(response) {
    $("input[data-recaptcha]")
      .val(response)
      .trigger("change");
  };

  window.expiredRecaptchaCallback = function() {
    $("input[data-recaptcha]")
      .val("")
      .trigger("change");
  };
  ("use strict");
  window.addEventListener(
    "load",
    function() {
      var forms = document.getElementsByClassName("needs-validation");
      var url = "contactform.php";
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener(
          "submit",
          function(event) {
            if (form.checkValidity() === false) {
              event.preventDefault();
              event.stopPropagation();
              grecaptcha.reset();
            } else {
              var formdata = new FormData($("#contact-form").get(0));
              $.ajax({
                type: "POST",
                url: url,
                data: $(this).serialize(),
                success: function(data) {
                  var messageAlert = "alert-" + data.type;
                  var messageText = data.message;

                  var alertBox =
                    '<div class="alert ' +
                    messageAlert +
                    '" role="alert">' +
                    messageText +
                    "</div>";
                  if (messageAlert && messageText) {
                    $("#contact-form")
                      .find(".messages")
                      .html(alertBox);
                    $("#contact-form")[0].reset();
                    grecaptcha.reset();
                  }
                }
              });
              return false;
            }
            form.classList.add("was-validated");
          },
          false
        );
      });
    },
    false
  );
})(); 

0 个答案:

没有答案