Javascript 目标表单成功与JS？

我在一个节点应用程序中使用vanilla JS（没有jQuery！），我试图通过JS实现“成功”状态。请看一看附加的GIF，您可以看到我要做的是在提交表单后显示一条成功消息。但是，此消息通过JS显示为click事件和setTimeout的结果，因此在正确填写表单和未正确填写表单时都会激活

我的代码：

// 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)
});

//联系人表单提交效果
document.querySelector（“#contact submit”）.addEventListener（'click'，function（）{
//负载微调器效应
document.querySelector（“#contact submit”）.innerHTML=”
//获取用于替换div的容器的高度和宽度
const contactHeight=document.querySelector（“#contactContainer”）。offsetHeight；
const contactWidth=document.querySelector（“#contactContainer”）.offsetWidth；
setTimeout（函数（）{
//删除表单元素
const children=document.querySelector（'#contactContainer#contact'）.childNodes；
children.forEach（元素=>{
if（element.nodeName.toLowerCase（）=='fieldset'）{
element.style.display='none'；
}
});
//创建消息DIV和内容
const contactMsg=document.createElement（'div'）；
contactMsg.classList.add（'contactMsg'）；
contactMsg.innerHTML=`
为嘈杂的喧闹而欢呼！
Vi供应商tilbage hurtigst muligt

`
//向DOM追加消息
document.querySelector（“#contactContainer”）.appendChild（contactMsg）；
//设置消息的高度和宽度以反映以前内容的大小
contactMsg.parentNode.style.height=`${contactHeight}px`；
contactMsg.parentNode.style.width=`${contactWidth}px`；
}, 1000)
});

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

---

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

如果您不收听按钮单击事件，而是收听表单提交事件，则除非填写了所有具有

必需属性的字段，否则函数实际上不会运行

有关提交事件的详细信息，请访问

并且可以找到有关客户端验证的更多信息。
更新：多亏了@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>


//....

现在，成功消息仅显示在成功的表单提交上，页面不会重新加载。
理想情况下，您应该控制提交过程。。。您正在执行ajax请求吗？如果是，则应在请求的成功回调上调用成功状态。但是在您的情况下，对于前端来说，只需执行一个常规的表单post请求并重定向到服务器中的成功页面就可以了。谢谢您的评论@GustavoSantiago。我没有使用Ajax。我正在使用一个节点应用程序，其中我在server.js中有我的POST请求，然后由我的表单通过action=“/message”调用。多亏了用户“osynkad”，表单现在可以正常工作了——不过，页面一直在无限加载。你有没有在我的server.js中不包含“res.redirect”的想法？我想避免页面刷新。这很好。我将eventlistener放在表单上，并监听submit事件。非常简单的修复。我不知道我怎么会错过它。但是，现在选项卡将无限地重新加载。我尝试了.preventDefault（），但是表单当然不会提交。有什么想法吗？
e.preventDefault（）
应该采取措施避免表单导致页面重新加载。
preventDefault（）
下面的代码是否没有运行？代码运行，这意味着视觉效果现在应该是这样，但表单实际上没有提交。表单应该通过HTML action=“/message”激活我的server.js POST请求（app.POST），我想e.preventDefault（）会阻止这一点吗？是的，
e.preventDefault（）
会阻止默认事件功能。您应该能够从事件arg访问所有表单输入数据，并使用内置的
fetch
API向后端发出POST请求。不幸的是，我不太熟悉默认的提交功能。