我在哪里将我的 ajax 添加到 Bootstrap 4 的表单验证 javascript 中？

我发现某些方法有一些奇怪的用法，但我认为它应该是这样的。

我不知道为什么每个人都喜欢将方法的第三个参数添加为 的值。但默认值为 3laya el 7aram men dini。看一看 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListenerfalseaddEventListeneruseCapturefalse

function onSuccess(data) {
  const error = data.type === 'error';
  const className = error ? 'error' : 'success';
  const output = `<div class="${className}">${data.text}</div>`;
  $('#contact-results').html(output);
  if (!error) {
    $(form)[0].reset();
  }
}

function onSubmit(event) {
  const form = event.target
  if (form.checkValidity() === false) {
    event.preventDefault();
    event.stopPropagation();
  }
  form.classList.add('was-validated');
  const options = {
    type: 'POST',
    dataType: 'json',
    url: 'contact.php',
    success: onSuccess,
    data: $(form).serialize(),
  }
  $.ajax(options);
}

function onLoad() {
  const forms = document.querySelectAll('.needs-validation');
  forms.forEach(function(form) {
    form.addEventListener('submit', onSubmit);
  });
}

(function() {
  'use strict';
  window.addEventListener('load', onLoad);
})();

此外，我建议始终保持块尽可能简单。因为它们很容易生长。

这是一个关于如何将 javascript 添加到代码的简单教程。

现在您知道在哪里可以添加您的： 一旦你的表单被验证，你的调用将被调用：javascriptajax

(function () {
    "use strict";
    window.addEventListener("load", function () {
        var forms = document.getElementsByClassName("needs-validation");

        var validation = Array.prototype.filter.call(forms, function (form) {
            form.addEventListener("submit", function (event) {
                if (form.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                form.classList.add("was-validated");

                // Here you are going to add your ajax call after checking if the form validation is valid
                if (form.checkValidity() === true) {
                    event.preventDefault();
                    // To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the .was-validated class from the <form> again after submission. (boostrap doc)
                    form.classList.remove("was-validated");
                    $.ajax({
                        url: "contact.php",
                        type: "POST",
                        dataType: "json",
                        data: $(this).serialize(),
                        success: function (data) {
                            if (data.type == "error") {
                                output = '<div class="error">' + data.text + "</div>";
                            }
                            else {
                                $(form)[0].reset();
                                output = '<div class="success">' + data.text + "</div>";
                            }
                            $("#contact-results").html(output);
                        }
                    });
                }

            },
                false);
        });
    },
    false);
})();