在表单验证中同时显示所有错误消息

胡安·卡洛斯·德卢纳

为什么我的条件语句不能正常工作？我想同时显示两个错误消息。

function validate() {
  if (firstName.value == "") {
    document.getElementById('error').innerHTML = "*Field is empty";
    return false;
  } else if (lastName.value == "") {
    document.getElementById('errorTwo').innerHTML = "*Field is empty";
    return false;
  } else {
    return true;
  }
}

<form name="form" action="action.php" method="post" onsubmit="return validate()">
  <div class="wrapper">
    <span>Name</span>
    <br>
    <input type="text" name="firstName" id="firstName" placeholder="First Name" onfocus="this.placeholder=''" onblur="this.placeholder='First Name'" />&nbsp;
    <label id="error"></label>
    <br>
    <input type="text" name="middleName" id="middleName" placeholder="Middle Name (optional)" onfocus="this.placeholder=''" onblur="this.placeholder='Middle Name (optional)'" />
    <input type="text" name="lastName" id="lastName" placeholder="Last Name" onfocus="this.placeholder=''" onblur="this.placeholder='Last Name'" />&nbsp;
    <label id="errorTwo"></label>
    <br>
    <br>
  </div>

黑暗河马

您的条件语句运行正常，但是您对它们的理解有些差。

一个if/else if声明将停止运行时，条件匹配，因此，如果firstName.value是空的，那么该if语句将被匹配和代码将退出那里，而不是评估条件的休息。

您希望对每个测试使用独立的条件语句，而不是返回true或false，而是将变量设置为true或false并在条件检查之后返回该变量。

所以...

function validate()
{
  var valid = true;
  if(firstName.value=="")
  {
      document.getElementById('error').innerHTML="*Field is empty";
      valid = false;
  }

  if(lastName.value=="")
  {
      document.getElementById('errorTwo').innerHTML="*Field is empty";
      valid = false;
  }

  return valid;
}