使用 addEventListener ("click", submitEvent) 时防止表单被提交

Question

我有以下 function 的问题，提交表单时，即使用户没有填写必填字段，重定向仍然有效，你知道怎么做吗？

var submitButton = document.getElementById("form-submit");
var submitEvent = function (event) {

  var SiteTestRedirect = document.getElementById("SiteTestfs").value;
  var SiteTestRedirectPopup = document.getElementById("SiteTestfspop").value;

  if (SiteTestRedirect === "I Wanna Work" || SiteTestRedirectPopup === "I Wanna Work As --") {
    event.preventDefault();
    location = "https://SiteTest.es/thank-you-start-with-us/";
  } else if (SiteTestRedirect === "Work" || SiteTestRedirectPopup === "Work") {
    event.preventDefault();
    location = "http://SiteTest.es/thank-you-start-with-us/";
  } else {
    setTimeout(function(){
      location = "https://SiteTest.es/thank-you/";
    }, 3500);
  }


};

submitButton.addEventListener("click", submitEvent, false);

输入字段已经具有required属性，当我点击submit时，它显示“此字段为必填项”但表单仍然提交

Answer 1

1. 如果您没有明确设置按钮的type ，则<form></form>标签内的所有<button />标签都将被视为submit button 。

2. 您必须处理<form>标签的submit事件并使其成为preventDefault()

<form id="my-form">
<button id="button-a">button a</button>
<button id="button-b" type="button">button b</button>
<button id="button-c" type="submit">button c</button>
</form>

当您单击button-a或button-c时，从my-form发送submit事件。 并submit事件使浏览器重定向（或刷新）。

你必须这样做。

document.querySelector('#my-form').addEventListener('submit', (event) => {
  event.preventDefault()
  // prevents browser to refresh when submit event is dispatched

  // jobs that you want to do on submit
})