javascript - 如何在提供新输入后立即使 JavaScript 表单错误消失？

Question

这是我的代码：

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

// NAME VALIDATION
        if(nameInput.value === ""){ 
                nameMsg = document.getElementById("nameErr");
                nameMsg.style.background = "red"; 
                nameMsg.innerHTML = "Please enter your name."; 
                nameMsg.style.color = "white";
                nameInput.focus();
                return false;
        }
    
        
// ID VALIDATION
        if(idInput.value === ""){
            idMsg = document.getElementById("idErr");
            idMsg.style.background = "red"; 
            idMsg.innerHTML = "Please enter the correct ID."; 
            idMsg.style.color = "white";
            idInput.focus();
            return false;
        }

首先验证我的姓名字段。如果为空，则会出现红色警报。但是，一旦我编辑空名称字段，添加名称并再次点击提交，就会检测到空 ID 字段。发生这种情况时，我只希望 ID 字段为红色，并且名称字段不应继续显示错误，因为已满足条件。我怎么做？

错误图片

标签： javascript

Answer 1

i think you should add an else statement to the input field... like this...


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

// NAME VALIDATION
        if(nameInput.value === ""){ 
                nameMsg = document.getElementById("nameErr");
                nameMsg.style.background = "red"; 
                nameMsg.innerHTML = "Please enter your name."; 
                nameMsg.style.color = "white";
                nameInput.focus();
                return false;
        } else { 
           nameMsg = document.getElementById("nameErr");
                nameMsg.style.display= "none";
}
    
        
// ID VALIDATION
        if(idInput.value === ""){
            idMsg = document.getElementById("idErr");
            idMsg.style.background = "red"; 
            idMsg.innerHTML = "Please enter the correct ID."; 
            idMsg.style.color = "white";
            idInput.focus();
            return false;
        }else { 
            idMsg = document.getElementById("idErr");
            idMsg.style.display= "none"; 
        
}