如何在Javascript/HTML中一次显示所有输入错误

<form id="myForm">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" required>
  <br>
  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email" required>
  <br>
  <label for="password">密码:</label>
  <input type="password" id="password" name="password" required>
  <br>
  <input type="submit" value="提交">
</form>

document.getElementById("myForm").addEventListener("submit", function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  var form = event.target;
  var errorMessages = [];

  // 检查姓名字段
  var nameInput = form.elements["name"];
  if (!nameInput.checkValidity()) {
    errorMessages.push("姓名不能为空");
  }

  // 检查电子邮件字段
  var emailInput = form.elements["email"];
  if (!emailInput.checkValidity()) {
    errorMessages.push("请输入有效的电子邮件地址");
  }

  // 检查密码字段
  var passwordInput = form.elements["password"];
  if (!passwordInput.checkValidity()) {
    errorMessages.push("密码不能为空");
  }

  // 显示错误消息
  var errorContainer = document.getElementById("errorContainer");
  errorContainer.innerHTML = ""; // 清空容器
  if (errorMessages.length > 0) {
    errorMessages.forEach(function(message) {
      var errorMessage = document.createElement("p");
      errorMessage.textContent = message;
      errorContainer.appendChild(errorMessage);
    });
  } else {
    form.submit(); // 没有错误，提交表单
  }
});

<div id="errorContainer"></div>