如何让JavaScript表单错误在用户输入新内容后自动消失

问题原因 #

你当前的代码仅会在校验不通过时为对应字段设置错误提示，没有补充「校验通过时清空对应字段历史错误提示」的逻辑，因此之前触发的错误提示会一直保留在页面上。

解决方案 #

推荐你在每次执行校验逻辑前，先统一清空所有字段的错误提示状态，再逐个做字段有效性校验，仅给当前不符合规则的字段设置错误提示即可。
修改后的参考代码如下：

var nameInput = formHandle.f_Name;
var idInput = formHandle.f_Id;   

// 每次校验前先清空所有已有错误提示
document.getElementById("nameErr").innerHTML = "";
document.getElementById("nameErr").removeAttribute("style");
document.getElementById("idErr").innerHTML = "";
document.getElementById("idErr").removeAttribute("style");

// 姓名校验
if(nameInput.value === ""){ 
    nameMsg = document.getElementById("nameErr");
    nameMsg.style.background = "red"; 
    nameMsg.innerHTML = "请输入您的姓名"; 
    nameMsg.style.color = "white";
    nameInput.focus();
    return false;
}

// ID校验
if(idInput.value === ""){
    idMsg = document.getElementById("idErr");
    idMsg.style.background = "red"; 
    idMsg.innerHTML = "请输入正确的ID"; 
    idMsg.style.color = "white";
    idInput.focus();
    return false;
}

如果你不想每次都全量清空所有提示，也可以给每个字段的校验补充通过分支的单独处理逻辑：对应字段校验通过时，单独清空该字段绑定的错误提示即可。

内容的提问来源于stack exchange，提问作者Jenny Dcruz