如何将 AJAX 表单提交合并到 Bouncer.js 中？

Question

我需要我的联系表单来验证并提交 AJAX。

所以，我创建了这个很棒的 PHP 和 Vanilla JS AJAX 表单，终于让它工作了，然后决定添加一些验证。

对于上述验证，我首先查看了 Validate.js，但后来发现它已被弃用，并且要使用新插件 Bouncer.js(https://github.com/cferdinandi/bouncer)。

现在，话虽如此，Bouncer.js 和我的 AJAX 函数并不能很好地配合使用。根据文档，有一个地方可以放置我的 AJAX 函数，我只是不知道如何翻译它，以便验证和请求一起工作。

文档：

// Detect a successful form validation
document.addEventListener('bouncerFormValid', function (event) {
// The successfully validated form
var form = event.target;
// If `disableSubmit` is true, you might use this to submit the form with Ajax
}, false);

我的 AJAX 函数：

const _ = id => document.getElementById(id);

const submit = _('form1_contact__submit')
const status = _('status')

window.addEventListener("load", function () {
  function sendData() {
    const XHR = new XMLHttpRequest();

    // Bind the FormData object and the form element
    const FD = new FormData(form);

    status.innerHTML = 'Please wait...'

    // Define what happens on successful data submission
    XHR.addEventListener("load", function(event) {
      // if(event.target.responseText == 'Success');
      if(XHR.readyState == 4 && XHR.status == 200) {
             contactForm.innerHTML = '<div class="success"><h2>Thanks for getting in touch. Your message has been sent.</h2><p>This page will refresh in <span id="countdown"></span></p>';
           contactForm.className += ' flex';
           (function countdown(remaining) {
              if(remaining === 0)
                  location.reload(true);
              document.getElementById('countdown').innerHTML = remaining;
              setTimeout(function(){ countdown(remaining - 1); }, 1000);
          })(5);
         } else {
           status.innerHTML = XHR.responseText;
           submit.disabled = false;
         }
       });

    // Set up our request
    XHR.open("POST", "/contact");

    // The data sent is what the user provided in the form
    XHR.send(FD);
  }

  // Access the form element...
  const form = contactForm

  // ...and take over its submit event.
  form.addEventListener("submit", function (event) {
    event.preventDefault();

    sendData();
  });
});

如何将其翻译为与 Bouncer.js 一起使用？没有 jQuery。我正在工作，真的需要学习和理解 Javascript。请提前谢谢您。

//------------------// 更新 //---------- ------------------//

所以，这是我的代码重新访问，并进行了一些更改以依赖 bouncerFormValid 回调。这可能是非常错误的，所以请原谅我杀了这个，但是这里是：

const _ = id => document.getElementById(id);

var bouncer = new Bouncer('[data-validate]');

document.addEventListener('bouncerFormValid', function() {

  function sendData() {

    const submit = _('form1_contact__submit')
    const status = _('status')

    const XHR = new XMLHttpRequest();

    const FD = new FormData(form);

    status.innerHTML = 'Please wait...'

    XHR.addEventListener('bouncerFormValid', function(event) {
      if (event.target.responseText == 'Success');
      if (XHR.readyState == 4 && XHR.status == 200) {
        contactForm.innerHTML = '<div class="success"><h2>Thanks for getting in touch. Your message has been sent.</h2><p>This page will refresh in <span id="countdown"></span></p>';
        contactForm.className += ' flex';
        (function countdown(remaining) {
          if (remaining === 0)
            location.reload(true);
          document.getElementById('countdown').innerHTML = remaining;
          setTimeout(function() {
            countdown(remaining - 1);
          }, 1000);
        })(5);
      } else {
        status.innerHTML = XHR.responseText;
        submit.disabled = false;
      }
    });

    XHR.open("POST", "/contact");

    XHR.send(FD);
  }

  const form = contactForm

  // ...and take over its submit event.
  form.addEventListener('submit', function(event) {
    event.preventDefault();
    sendData();
  });

}, false);

表单注册错误并提交，但不是所需的 JS 操作，而是使用 PHP 成功消息刷新页面。

我不确定这是怎么回事，但我觉得这与我的提交事件有关。

Answer 1

您的 ajax 调用不应处于加载状态。它应该在bouncerFormValid 回调中。