如何通过重置按钮清除JavaScript表单校验错误信息（不使用jQuery）

实现思路 #

你只需要额外新增一个清空错误提示的函数，绑定到表单的重置事件上即可，全程不需要使用jQuery。

具体修改步骤 #

1. 首先在原有的validation函数旁边新增清空错误的函数：

function clearValidationErrors() {
  // 批量清空所有错误提示
  const errorSpans = document.querySelectorAll('.text-danger');
  errorSpans.forEach(span => span.innerHTML = '');
}

如果想要更稳妥不影响页面其他可能存在的.text-danger元素，也可以写死错误提示的ID：

function clearValidationErrors() {
  document.getElementById('fnameMessage').innerHTML = '';
  document.getElementById('lnameMessage').innerHTML = '';
  document.getElementById('emailMessage').innerHTML = '';
  document.getElementById('phoneMessage').innerHTML = '';
}

2. 给表单绑定reset事件，修改你的form标签代码，增加onreset属性：

<form method="POST" action="#" onsubmit="validation(); return false;" onreset="clearValidationErrors()">

3. 【可选优化】建议给原有的校验函数增加前置清空逻辑，避免用户第二次提交时旧错误提示残留：
   在每个字段的校验逻辑前先清空对应字段的错误提示，举个例子：

//Validate first name
document.getElementById("fnameMessage").innerHTML = ""; // 先清空旧提示
if (formFname.length == 0) {
  document.getElementById("fnameMessage").innerHTML = "<em>You did not enter your first name</em>"
}

其他三个字段（姓氏、邮箱、手机号）的校验也都对应增加前置清空的代码即可。

修改完成后点击重置按钮，就会同时清空输入内容和所有错误提示了。

内容的提问来源于stack exchange，提问作者Koshila Dodantenna