javascript - 如何将 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 回调。