原生JavaScript表单校验代码重构后空表单无法触发alert问题

• 自定义函数名占用了原生alert：将校验函数命名为alert，直接覆盖了浏览器内置的window.alert弹窗方法，函数内部调用alert()时会触发递归调用，永远不会弹出预期提示，还可能导致栈溢出报错。
• 空字段统计逻辑完全错误：你定义的fields是存储字段ID字符串的Set集合，本身没有value属性，fields.value == ""的返回值是布尔值false，布尔值不存在length属性，因此required.length永远是undefined，所有判断分支都会走到else逻辑，直接执行提交操作，不会触发必填提示。
• 未阻止表单默认提交行为：就算补全了校验逻辑，没有阻止点击提交按钮的默认提交行为，浏览器也会直接提交表单，忽略校验逻辑。
• 调用submit()的对象错误：submit()是<form>元素的方法，给提交按钮调用submit()不会生效，需要获取表单DOM节点再调用该方法。

首先可顺带修正HTML小问题：当前<textarea>的name属性写的是name，和第一个输入框重名，建议改成name="message"避免提交时参数冲突。

修复后的完整JS代码如下：

let send = document.getElementById("send");
const form = document.querySelector('form'); // 获取表单元素
const fields = new Set([
  'name',
  'email',
  'message',
]);

// 函数名不要占用原生API名称
function validateForm(e) {
  // 阻止表单默认提交行为
  e.preventDefault();
  // 遍历Set统计空字段
  const emptyFields = [];
  fields.forEach(fieldId => {
    const el = document.getElementById(fieldId);
    // 加trim过滤空字符，避免用户仅输入空格通过校验
    if (el.value.trim() === '') {
      emptyFields.push(fieldId);
    }
  })

  if (emptyFields.length === 1) {
    window.alert("The field is required!");
  } else if (emptyFields.length > 1) {
    window.alert("The fields are required!");
  } else {
    form.submit();
    window.alert("Agradecemos, mensagem enviada com sucesso!")
  }
}

send.addEventListener("click", validateForm)

内容的提问来源于stack exchange，提问作者Oo'-