I want to redirect to another html page named formPreview.html after validation and form submit so I specified action attribute with the value "formPreview.html" but after passing the validation when the submit button is clicked is not going to that page

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

CodePudding user response：

Several issues

1. you always preventDefault (which is submit)
2. give the form an ID if you want to access the submit event
3. Clear the errors and don't create one if already there
4. No age field
5. fields not defined in script

You COULD use patterns like [a-zA-Z-'] to not have to test the name using script but I would not limit people to type what they wanted into a field.

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 >
  <form  action="formPreview.html" method="GET" id="form1">
    <div id="input-name">
      <label for="first-name-input" >First Name</label>
      <input type="text" placeholder="First Name" id="first-name-input" required />
      <label for="last-name-input" >Last Name</label>
      <input type="text" placeholder="Last Name" id="last-name-input" required />
    </div>
    <div id="input-email-phone">
      <label for="email-input" >Email</label>
      <input type="email" placeholder="[email protected]" id="email-input" required />
      <label for="phone-input" >Contact</label>
      <input type="tel" placeholder=" xx xxxxx xxxxx" id="phone-input" required />
    </div>
    <div id="address">
      <label for="address-input" >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" ></span>
</div>