Here is my code:
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;
}
First my name field is validated. If it is empty, a red alert appears. However once I edit the empty name field, add a name and hit submit again, the empty ID field is detected. When this happens I want only the ID field to be red and the name field should not continue to display an error as the conditions have been met. How do I do that?
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";
}
One way would be to use CSS classes.
Define a CSS class like:
.error-input {
background-color: red;
color: white;
}
then you can use Javascript to toggle this class:
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");
}
What you can do is hide all errors before validation:
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;
}