JavaScript实现表单提交后清空输入框恢复placeholder提示

问题现状 #

点击「Send besked」提交按钮、表单校验通过后，姓名、邮箱、留言三个输入控件内已填写的内容不会自动清除，无法恢复显示原始placeholder提示文本。

问题原因 #

现有代码中的clearMessage方法仅实现了错误提示文本清空、输入框错误边框移除的逻辑，未对输入控件的实际存储值（value属性）做重置操作，因此用户输入的内容会持续保留在控件中。

最简修改方式 #

只需要在校验通过的逻辑分支中，将三个输入控件的value设置为空字符串即可——当输入控件值为空时，浏览器会自动显示预设的placeholder文本，无需额外操作。
修改后校验通过部分的代码如下：

if (!errorFlag) {
  success.innerText = "Tak, din besked er modtaget";
  // 新增以下三行清空输入内容
  nameInput.value = "";
  email.value = "";
  message.value = "";
} else {
  success.innerText = "Udfyldt venligst felterne"
}

更易维护的可选方案 #

如果后续表单可能新增更多输入项，可以直接调用表单原生的reset()方法实现一键重置，不需要逐个给控件设置空值：

1. 首先在JS代码顶部新增表单元素的获取逻辑：

const contactForm = document.querySelector(".formtilgrid");

2. 将校验通过分支的清空逻辑替换为reset调用：

if (!errorFlag) {
  success.innerText = "Tak, din besked er modtaget";
  contactForm.reset();
}

注意：reset()方法只会重置输入控件的值，不会清除手动添加的error-border样式类，因此原有的clearMessage方法逻辑需要保留。

内容的提问来源于stack exchange，提问作者Mate Gate