用 JS 瞄准表单成功？答案

【问题标题】：Targeting form success with JS?用 JS 瞄准表单成功？
【发布时间】：2020-10-26 11:56:32
【问题描述】：

我在 Node 应用程序中使用 vanilla JS（没有 jQuery！），我试图通过 JS 定位“成功”状态。请看一下随附的 GIF，您可以看到我想要做的是在提交表单后显示一条成功消息。但是，此消息显示为单击事件和通过 JS 设置超时的结果，因此在正确填写表单和未正确填写表单时都会激活。

我的代码：

// Contact form submit effect
document.querySelector('#contact-submit').addEventListener('click', function() {

  // Load spinner effect
  document.querySelector('#contact-submit').innerHTML = '<i class="fa fa-spinner"></i>'

  // Get height and width of container for use in replacement div
  const contactHeight = document.querySelector('#contactContainer').offsetHeight;
  const contactWidth = document.querySelector('#contactContainer').offsetWidth;

  setTimeout(function() {
    // Remove form elements 
    const children = document.querySelector('#contactContainer #contact').childNodes;
    children.forEach(element => {
      if(element.nodeName.toLowerCase() == 'fieldset') {
        element.style.display = 'none';
      }
    });

    // Create message DIV and content
    const contactMsg = document.createElement('div');
    contactMsg.classList.add('contactMsg');
    contactMsg.innerHTML = `
    <h1>Tak for din besked! </h1>
    <p>Vi vender tilbage hurtigst muligt.</p>
    <img src="mail_sent.svg">`
    
    // Append message to DOM
    document.querySelector('#contactContainer').appendChild(contactMsg);

    // Set height and width of message to reflect size of previous content
    contactMsg.parentNode.style.height = `${contactHeight}px`;
    contactMsg.parentNode.style.width = `${contactWidth}px`;
  }, 1000)
});

我能想到的一种解决方法是使用 if 语句来查看是否所有字段都已填写，然后使用正则表达式来检查输入是否有效。但是，当 HTML5 已经具有此内置功能时，这似乎是湿代码。另一种方法可能是在我的 Node 应用程序中从 server.js 运行消息函数，但据我所知，我无法在 Node 中运行与 DOM 相关的函数。

TLDR;我将如何在纯 JS 中定位成功状态以便仅在成功的表单提交事件上显示消息？

【问题讨论】：

理想情况下你应该控制提交过程......你在做一个ajax请求吗？如果是，您应该在请求的成功回调上调用成功状态。但是在您的情况下，前端看起来更简单，只需执行常规表单发布请求并重定向到服务器中的成功页面
感谢您的评论@GustavoSantiago。我没有使用 Ajax。我正在使用一个节点应用程序，我在 server.js 中有我的 POST 请求，然后我的表单通过 action="/message" 调用该请求。感谢用户“osynkad”，表单现在可以按预期工作 - 但是，页面会无限加载广告。你有什么想法在我的 server.js 中不包含“res.redirect”吗？我想避免页面刷新。

标签： javascript node.js forms

【解决方案1】：

如果您不听按钮点击事件，而是听表单提交事件，除非所有带有 required-attribute 的字段都已填满，否则该函数不会实际运行。

有关提交事件的更多信息，请参见MDN。

更多关于客户端验证的信息可以在here找到。

【讨论】：

这很棒。我将事件监听器放在表单上并监听提交事件。伟大的简单修复。我不知道我是怎么错过的。但是，现在该标签会无限地重新加载。我尝试了 .preventDefault() 但是表单当然没有提交。有什么想法吗？
e.preventDefault() 应该可以避免表单导致页面重新加载。 preventDefault() 下的代码都没有运行吗？
代码运行，这意味着视觉效果现在应该是这样，但表单实际上并没有提交。表单应该通过 HTML action="/message" 激活我的 server.js POST 请求（app.post），我猜 e.preventDefault() 会阻止它？
是的，e.preventDefault() 阻止了默认事件功能。您应该能够从您的事件 arg 访问所有表单输入数据，并使用内置的 fetch API 向您的后端发出 POST 请求。不幸的是，我对默认提交功能不太熟悉。

【解决方案2】：

更新：感谢@osynkad，表单现在按预期工作。我的目标是表单及其提交事件，而不是按钮上的点击事件。

但是，此解决方案导致页面无限重新加载。为了避免重新加载，无需使用 AJAX 和 jQuery 重写所有内容，显然可以针对不可见的 iFrame 来避免页面重新加载。我不知道为什么，但它确实有效。

像这样：

<form id="contact" target="contact_iframe" action="/message" method="post" role="form">
  //....
</form>
<iframe id="contact_iframe" name="contact_iframe" style="display: none;"></iframe>

现在，成功消息只在表单提交成功时显示，页面不会重新加载。

【讨论】：