JS表单提交问题咨询：错误提示未自动清除与提交后页面跳转实现需求

Let's tackle your two issues step by step, with clear fixes for each problem:

Issue 1: Error Messages Don't Disappear After Correcting Inputs #

The main problems in your existing code are:

• Incorrect syntax for clearing error messages (using innerHTML.style = "none" which isn't valid)
• A bug in the checklname function where it updates the first name error element instead of the last name one
• Assigning validation function return values directly to input fields (which replaces user input with true/false)

Corrected Validation Functions & Logic #

Replace your existing JavaScript functions with these updated versions:

const form = document.querySelector("form"); // Fixed: target the form instead of container
const firstname = document.getElementById("fname");
const lastname = document.getElementById("lname");
const emailid = document.getElementById("emailid");
const password = document.getElementById("pass1");
const confirmpassword = document.getElementById("confirmpass");
const phoneno = document.getElementById("phno");

// Validate first name
function checkfname(fname) {
  let letters = /^[A-Z][a-z]+$/;
  const errorElement = document.getElementById("firstnameerror");
  if (fname.match(letters)) {
    errorElement.textContent = ""; // Clear error message
    return true;
  } else {
    errorElement.textContent = "First name must start with uppercase, followed by lowercase letters";
    return false;
  }
}

// Validate last name (fixed the error element target)
function checklname(lname) {
  let letter = /^[A-Z][a-z]+$/;
  const errorElement = document.getElementById("lastnameerror");
  if (lname.match(letter)) {
    errorElement.textContent = "";
    return true;
  } else {
    errorElement.textContent = "Last name must start with uppercase, followed by lowercase letters";
    return false;
  }
}

// Validate password
function passcheck(pass) {
  var paswd = /^(?=.*[0-9])(?=.*[!@#$%^&*])[a-zA-Z0-9!@#$%^&*]{7,15}$/;
  const errorElement = document.getElementById("passerror");
  if (pass.match(paswd)) {
    errorElement.textContent = "";
    return true;
  } else {
    errorElement.textContent = "Password must be 7-15 chars, include a number and special character";
    return false;
  }
}

// Validate phone number
function phonecheck(phval) {
  var phonecheck = /\+?\d[\d -]{8,12}\d/;
  const errorElement = document.getElementById("phoneerror");
  if (phval.match(phonecheck)) {
    errorElement.textContent = "";
    return true;
  } else {
    errorElement.textContent = "Please enter a valid phone number";
    return false;
  }
}

// Main validation function (returns true only if all fields pass)
function testfunc() {
  let isFormValid = true;

  // First name check
  if (firstname.value.trim() === "") {
    document.getElementById("firstnameerror").textContent = "Please enter your first name";
    isFormValid = false;
  } else if (!checkfname(firstname.value)) {
    isFormValid = false;
  }

  // Last name check
  if (lastname.value.trim() === "") {
    document.getElementById("lastnameerror").textContent = "Please enter your last name";
    isFormValid = false;
  } else if (!checklname(lastname.value)) {
    isFormValid = false;
  }

  // Email check (added basic format validation)
  if (emailid.value.trim() === "") {
    document.getElementById("emailerror").textContent = "Please enter your E-mail ID";
    isFormValid = false;
  } else {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(emailid.value)) {
      document.getElementById("emailerror").textContent = "Please enter a valid email address";
      isFormValid = false;
    } else {
      document.getElementById("emailerror").textContent = "";
    }
  }

  // Password check
  if (password.value.trim() === "") {
    document.getElementById("passerror").textContent = "Please enter a password";
    isFormValid = false;
  } else if (!passcheck(password.value)) {
    isFormValid = false;
  }

  // Confirm password check
  if (confirmpassword.value.trim() === "") {
    document.getElementById("passerror2").textContent = "Enter the password again";
    isFormValid = false;
  } else if (confirmpassword.value !== password.value) {
    document.getElementById("passerror2").textContent = "Passwords do not match";
    isFormValid = false;
  } else {
    document.getElementById("passerror2").textContent = "";
  }

  // Phone number check
  if (phoneno.value.trim() === "") {
    document.getElementById("phoneerror").textContent = "Please enter your mobile number";
    isFormValid = false;
  } else if (!phonecheck(phoneno.value)) {
    isFormValid = false;
  }

  return isFormValid;
}

Issue 2: Redirect to Another Page After Successful Validation #

Update your form submit event listener to check if the entire form is valid, then trigger the redirect:

form.addEventListener("submit", function (e) {
  e.preventDefault();
  const isValid = testfunc();
  if (isValid) {
    // Replace 'success.html' with your target page path
    window.location.href = "success.html";
  }
});

Key notes here:

• We first prevent the default form submission behavior with e.preventDefault()
• We run the full validation and store the result in isValid
• If all fields pass validation, window.location.href redirects the user to your desired page

Additional Improvements #

• Changed form selection to target the <form> element instead of the container (more accurate)
• Added basic email format validation (your original code didn't validate email structure)
• Used textContent instead of innerHTML for error messages (safer and more performant)
• Trimmed input values with trim() to handle accidental whitespace

内容的提问来源于stack exchange，提问作者Sahas Vivek