如何使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;
}

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

错误图像

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"; 

}

Answer 2

一种方法是使用CSS类。

定义一个CSS类:

.error-input {
background-color: red;
color: white;
}

那么你可以使用Javascript来切换这个类:

if(nameInput.value === ""){ 
nameMsg = document.getElementById("nameErr");
nameInput.classList.add("error-input");
nameMsg.innerHTML = "Please enter your name."; 
nameInput.focus();
return false;
} else {
nameInput.classList.remove("error-input");
}

Answer 3

可以在验证之前隐藏所有错误:

var nameInput = formHandle.f_Name;
var idInput = formHandle.f_Id;   
nameMsg = document.getElementById("nameErr");
idMsg = document.getElementById("idErr");
nameMsg.style.display = "none";
idMsg.style.display = "none";
// NAME VALIDATION
if(nameInput.value === ""){ 
nameMsg.style.background = "red"; 
nameMsg.innerHTML = "Please enter your name."; 
nameMsg.style.color = "white";
nameMsg.style.display = "inline-block";
nameInput.focus();
return false;
}

// ID VALIDATION
if(idInput.value === ""){
idMsg.style.background = "red"; 
idMsg.innerHTML = "Please enter the correct ID."; 
idMsg.style.color = "white";
idMsg.style.display = "inline-block";
idInput.focus();
return false;
}

Answer 4

到目前为止，最简单的方法是使用HTML5input元素为您管理验证。在本例中，如果输入中的两个值都不正确，则表单将无法验证，并且会得到一些警告。通过CSS伪类:invalid，你也有了一个很好的表达方式。

// Caching the form element and adding a listener to it
const form = document.querySelector('form');
form.addEventListener('submit', handleClick, false);
function handleClick(e) {
// When the form is valid prevent it from
// submitting - in this instance! - and
// log all the input values
e.preventDefault();
const inputs = form.querySelectorAll('input');
inputs.forEach(input => {
console.log(input.value);
});
}

input { border: 2px solid black; display: block; }
input:invalid { border: 2px solid red; }

<form>
Number<input type="number" placeholder="A number" />
Name<input type="text" placeholder="Letters" pattern="[A-Za-z]+" />
Email<input type="email" placeholder="Email" />
<button>Submit</button>
</form>