由於 e.preventDefault()，我的表單驗證不起作用

Question

我的 javascript 驗證沒有工作，即使我添加了一個狀態來檢查它是否返回 true 或 false，我懷疑這是因為 e.preventDefault()。 我還在學習 javascript 有時會感到困惑。

 const form = document.getElementById("form");
      const name = document.getElementById("username");
      const number = document.getElementById("number");
      const btn = document.querySelector("button.submit");
      let status = false;

      btn.addEventListener("submit", (e) => {
        if (!checkInputs()) {
          e.preventDefault();
        } else {
          form.submit();
        }
      });

      function checkInputs() {
        const usernameValue = username.value.trim();
        const numberValue = number.value.trim();

        if (usernameValue === "") {
          status = setErrorFor(username, "First Name cannot be empty");
        } else {
          status = setSuccessFor(username);
        }

        if (numberValue === "") {
          status = setErrorFor(lastname, "Last Name cannot be empty");
        } else {
          status = setSuccessFor(lastname);
        }

        return status;
      }

      function setErrorFor(input, message) {
        const formControl = input.parentElement;
        const small = formControl.querySelector("small");
        formControl.className = "form-control error";
        small.innerText = message;
        return false;
      }

      function setSuccessFor(input) {
        const formControl = input.parentElement;
        formControl.className = "form-control success";
        return true;
      }

Answer 1

提交事件不適用於按鈕。 您需要在表單上設置提交事件：

form.addEventListener("submit", (e) => {
    if (!checkInputs()) {
      e.preventDefault();
    } else {
      form.submit();
    }
  });