JavaScript表单多字段顺序校验问题求助

Hey there! I see exactly what's causing your validation to skip fields and jump straight to email checks—let's break it down and fix it.

The Root Problem #

You've defined three separate functions all named validateForm in your JavaScript. In JavaScript, when you declare multiple functions with the same name, each subsequent one overwrites the previous ones. That means only the last function (the email validation one) is actually running when your form submits—so the first name and surname checks never even get executed!

The Solution: Combine Validation Logic into One Function #

To get sequential validation (first name → surname → email), we'll merge all three checks into a single validateForm function. This way, the code will run step-by-step: it'll check the first name first, only move to the surname if the first name is filled, and only check the email if both names are valid.

Here's the corrected code:

Updated JavaScript

function validateForm() { 
  // First, validate first name
  var fname = document.forms["buyProductForm"]["fname"].value; 
  if (fname.trim() === "") { 
    alert("Firstname must be filled out"); 
    return false; 
  } 

  // Next, validate surname
  var sname = document.forms["buyProductForm"]["sname"].value; 
  if (sname.trim() === "") { 
    alert("Surname must be filled out"); 
    return false; 
  } 

  // Finally, validate email
  var email = document.forms["buyProductForm"]["email"].value; 
  if (email.trim() === "") { 
    alert("Email must be filled out"); 
    return false; 
  }

  // If all checks pass, allow form submission
  return true;
} 

Your HTML (No Changes Needed)

<form name="buyProductForm" onsubmit="return validateForm()" method="post"> 
  <fieldset id="field1"> 
    <legend>Personal Details</legend> 
    <label for="name">Firstname:</label> 
    <input type="text" name="fname" placeholder="Enter your first name" ><br> 
    <label for="name">Surname:</label> 
    <input type="text" name="sname" placeholder="Enter your surname"><br> 
    <label for="email">Email Adress:</label> 
    <input type="email" name="email" placeholder="Enter your email" ><br>
  </fieldset>
</form>

Key Notes #

• I added .trim() to each value check—this ensures that users can't just submit whitespace (like spaces) as a valid entry.
• The function returns false immediately when a field fails validation, which stops the rest of the code from running (so it won't check the next fields until the current one is fixed).
• If all fields pass, the function returns true, allowing the form to submit as expected.

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