如何在表单验证中显示空字段的警告？

<form id="myForm">
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name">
  <span id="nameWarning" class="warning"></span>
  
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email">
  <span id="emailWarning" class="warning"></span>
  
  <input type="submit" value="提交">
</form>

.warning {
  color: red;
}

document.getElementById("myForm").addEventListener("submit", function(event) {
  // 阻止表单提交
  event.preventDefault();
  
  // 调用验证函数
  var isValid = validateForm();
  
  // 如果验证通过，则提交表单
  if (isValid) {
    this.submit();
  }
});

function validateForm() {
  var name = document.getElementById("name").value;
  var email = document.getElementById("email").value;
  var isValid = true;
  
  // 检查姓名字段是否为空
  if (name === "") {
    document.getElementById("nameWarning").textContent = "姓名不能为空";
    isValid = false;
  } else {
    document.getElementById("nameWarning").textContent = "";
  }
  
  // 检查邮箱字段是否为空
  if (email === "") {
    document.getElementById("emailWarning").textContent = "邮箱不能为空";
    isValid = false;
  } else {
    document.getElementById("emailWarning").textContent = "";
  }
  
  return isValid;
}