时间戳

首页 > 解决方案 > 允许 HTML 表单验证，但一旦完成就停止提交

javascript - 允许 HTML 表单验证，但一旦完成就停止提交

问题描述

我知道一种阻止表单提交的方法，但是即使表单没有通过 HTML 验证，我也有一个点击事件到提交​​按钮并触发它。

<form id="signupform" class="signupform" onsubmit="(e)=>{e.preventDefault()};return false">

</form>

我的目标是停止页面刷新（无论是否验证），但仍然允许内置验证首先运行。

有什么建议么？

标签： javascripthtml

解决方案

按钮的submit工作是submit触发form. 因此，对于form元素，您无需click在submit按钮上设置submit事件，而是在form.

然后，为了在混合中引入验证，您可以submit在处理程序中停止本机，仅当验证失败时。这是通过访问event自动发送到每个 DOM 事件处理程序*的参数来完成的（请参阅下一段以了解警告）。您可以使用该event.preventDefault()方法阻止本机事件发生。

*最后一点，应避免使用内联 HTML 事件处理属性，例如onsubmit和onclick。这是我们在制定标准之前使用了 25 年以上的技术，不幸的是，因为它们看起来很容易使用，它们被不了解的新开发人员复制。有真正的理由不使用它们，而您偶然发现了一个。您e对事件处理函数的参数未填充对event您认为的类似内容的引用。只有当您使用设置事件回调的现代标准方法时才会发生这种情况，即.addEventListener().

// Set up a submit event handler for the form
// not a click event handler for the button because
// clicking a submit button triggers the form's submit event
document.querySelector("form").addEventListener("submit", function(event){
  if(document.querySelector("input").value === ""){
    // Invalid data! Stop the submit!
    event.preventDefault();
    alert("Please fill in all fields!");
    return;
  }

  // If the code reaches this point, validation succeeded
  console.log("Form submitted");
});
<form action="https://example.com" method="post">
  <input>
  <button>Submit</button>

</form>

推荐阅读