基于jQuery的表单元素验证优化：输入内容后取消空字段提示

Hey there! Let's get your form validation working exactly how you want it—only showing the "Please fill out this field" message when a field is empty, and hiding it as soon as the user enters content. Your current code has a few small issues that we'll fix step by step.

Issues in Your Current Code #

• Static Value Retrieval: You're grabbing field values when the page loads, not when validation runs. That means values won't update as the user types. Also, jQuery uses .val() instead of .value to get input values.
• Missing Textarea ID: Your textarea has name="Message" but your code references $("#comments")—you need to add an id="comments" to the textarea so the selector works.
• Bulk Validation Messages: Right now, if any field is empty, you set a validation message for all fields. We need to check each field individually so only empty fields show the error.
• Incorrect setCustomValidity Usage: When clearing validation messages, pass an empty string ("") instead of calling it with no argument for consistent browser support.
• Duplicate Event Triggers: Both the form's onsubmit and the button's onclick call validation()—we can remove the button's onclick to avoid redundant calls.

Corrected Code #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="mailto:kyletab03@gmail.com" name="myForm" method="post" onsubmit="return validation();" enctype="text/plain">
  Name: <input type="text" name="name" id="name" /><br />
  Surname: <input type="text" name="surname" id="surname" /><br />
  Email: <input type="email" name="email" id="email" /><br />
  Message: <textarea name="Message" id="comments" maxlength="3500"></textarea><br />
  <button id="submit">Submit</button>
</form>

JavaScript #

function validation() {
  // Get fresh values each time validation runs
  var name = $("#name").val();
  var surname = $("#surname").val();
  var email = $("#email").val();
  var comments = $("#comments").val();
  
  let isValid = true;

  // Validate each field individually
  if (name === "") {
    document.myForm.name.setCustomValidity("Please fill out this field");
    isValid = false;
  } else {
    document.myForm.name.setCustomValidity("");
  }

  if (surname === "") {
    document.myForm.surname.setCustomValidity("Please fill out this field");
    isValid = false;
  } else {
    document.myForm.surname.setCustomValidity("");
  }

  if (email === "") {
    document.myForm.email.setCustomValidity("Please fill out this field");
    isValid = false;
  } else {
    document.myForm.email.setCustomValidity("");
  }

  if (comments === "") {
    document.myForm.comments.setCustomValidity("Please fill out this field");
    isValid = false;
  } else {
    document.myForm.comments.setCustomValidity("");
  }

  return isValid;
}

How This Works #

• Real-Time Value Checks: We fetch field values inside the validation() function, so we always get the latest input from the user.
• Individual Field Validation: Each field is checked separately—only empty fields get the error message, and filled fields have their validation cleared immediately.
• Consistent Validation Clearing: Using setCustomValidity("") ensures browsers properly hide the error message when the field is filled.
• Single Event Trigger: Only the form's onsubmit event calls validation(), so we don't have duplicate validation runs.

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