HTML表單元素不作業時的action屬性

我想在驗證和表單提交后重定向到另一個名為 formPreview.html 的 html 頁面，因此我指定了值為“formPreview.html”的操作屬性，但在通過驗證后單擊提交按鈕時不會轉到該頁面

function showValidationError(message) {
  var errorDiv = document.createElement("div");
  errorDiv.setAttribute("id", "error-banner");
  var errorSpan = document.createElement("span");
  errorSpan.textContent = message;
  errorSpan.setAttribute("class", "error-text");
  errorDiv.appendChild(errorSpan);

  body.appendChild(errorDiv);
}

// ----------------------Validating each field----------------------

function validate() {
  if (numPresent.test(firstName.value)) {
    return [firstName, false];
  }
  if (numPresent.test(lastName.value)) {
    return [lastName, false];
  }
  if (isNaN(Number(phone.value))) {
    return [phone, false];
  }
  if (phone.value.length < 10) {
    return [phone, false];
  }
  if (age.value <= 0) {
    return [age, false];
  }
  return true;
}

// ----------------------Registering form submit events----------------------

form.addEventListener("submit", (e) => {
  e.preventDefault();
  if (validate() === true) {
    console.log("Form Submitted");
  } else {
    let array = validate();
    if (array[0].id === "phone-input") {
      showValidationError("Please enter the valid phone number");
    }
    if (array[0].id === "first-name-input") {
      showValidationError("Enter a valid firstname");
    }
    if (array[0].id === "last-name-input") {
      showValidationError("Enter a valid lastname");
    }
    if (array[0].id === "age-input") {
      showValidationError("Enter a valid age");
    }
  }
});

<div class="container">
  <form class="form" action="formPreview.html" method="GET">
    <div id="input-name">
      <label for="first-name-input" class="form-label">First Name</label>
      <input type="text" placeholder="First Name" id="first-name-input" required />
      <label for="last-name-input" class="form-label">Last Name</label>
      <input type="text" placeholder="Last Name" id="last-name-input" required />
    </div>
    <div id="input-email-phone">
      <label for="email-input" class="form-label">Email</label>
      <input type="email" placeholder="[email protected]" id="email-input" required />
      <label for="phone-input" class="form-label">Contact</label>
      <input type="tel" placeholder=" xx xxxxx xxxxx" id="phone-input" required />
    </div>
    <div id="address">
      <label for="address-input" class="form-label">Address</label>
      <input type="text" placeholder="Full address with ZIP Code " id="address-input" required />
    </div>
  </form>

uj5u.com熱心網友回復：

幾個問題

1. 你總是阻止默認（即提交）
2. 如果您想訪問提交事件，請給表單一個 ID
3. 清除錯誤，如果已經存在則不要創建錯誤
4. 沒有年齡欄位
5. 腳本中未定義的欄位

您可以使用 [a-zA-Z-'] 之類的模式來不必使用腳本測驗名稱，但我不會限制人們在欄位中輸入他們想要的內容。

const numPresent = /\d /
function showValidationError(message) {
  let errorSpan = document.getElementById("error-span");
  errorSpan.textContent = message;
  document.getElementById("error-banner").hidden = false;
}

// ----------------------Validating each field----------------------

function validate() {
  document.getElementById("error-banner").hidden = true;
  const firstName = document.getElementById("first-name-input")
  if (numPresent.test(firstName.value)) {
    return [firstName, false];
  }
  const lastName = document.getElementById("last-name-input")
  if (numPresent.test(lastName.value)) {
    return [lastName, false];
  }
  const phone = document.getElementById("phone-input")
  if (isNaN(Number(phone.value))) {
    return [phone, false];
  }
  if (phone.value.length < 10) {
    return [phone, false];
  }
  /* no age field
  if (age.value <= 0) {
    return [age, false];
  } */
  return true;
}

// ----------------------Registering form submit events----------------------

document.getElementById("form1").addEventListener("submit", (e) => {
  let array = validate(); // DRY
  if (array === true) { // overloading the array to be true or an array ?
    console.log("Form Submitted");
    return;
  }
  e.preventDefault();
  if (array[0].id === "phone-input") {
    showValidationError("Please enter the valid phone number");
  }
  if (array[0].id === "first-name-input") {
    showValidationError("Enter a valid firstname");
  }
  if (array[0].id === "last-name-input") {
    showValidationError("Enter a valid lastname");
  }
  if (array[0].id === "age-input") {
    showValidationError("Enter a valid age");
  }
});

<div class="container">
  <form class="form" action="formPreview.html" method="GET" id="form1">
    <div id="input-name">
      <label for="first-name-input" class="form-label">First Name</label>
      <input type="text" placeholder="First Name" id="first-name-input" required />
      <label for="last-name-input" class="form-label">Last Name</label>
      <input type="text" placeholder="Last Name" id="last-name-input" required />
    </div>
    <div id="input-email-phone">
      <label for="email-input" class="form-label">Email</label>
      <input type="email" placeholder="[email protected]" id="email-input" required />
      <label for="phone-input" class="form-label">Contact</label>
      <input type="tel" placeholder=" xx xxxxx xxxxx" id="phone-input" required />
    </div>
    <div id="address">
      <label for="address-input" class="form-label">Address</label>
      <input type="text" placeholder="Full address with ZIP Code " id="address-input" required />
    </div>
    <input type="submit" />
  </form>
</div>
<div id="error-banner" hidden>
  <span id="error-span" class="error-text"></span>
</div>

標籤：javascript html 形式

上一篇：我該如何解決：“未捕獲的TypeError：無法讀取null的屬性（正在讀取'addEventListener'）”？

下一篇：useEffect函式中未定義狀態的問題