如果 HTML 表单元素不起作用，则为 action 属性

Question

我想在验证和表单提交后重定向到另一个名为 formPreview.html 的 html 页面，所以我指定了值为“formPreview.html”的 action 属性，但是在通过验证之后单击提交按钮不会转到该页面

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="someone@example.com" 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>

Answer 1

几个问题

你总是防止默认（即提交）
如果您想访问提交事件，请为表单提供一个 ID
清除错误，如果已经存在则不创建
没有年龄字段
未在脚本中定义的字段

您可以使用像 [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="someone@example.com" 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>

如果 HTML 表单元素不起作用，则为 action 属性

The action attribute if the HTML form element is not working

html

javascript

forms