Aquí está mi código:
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; }Primero se valida el campo de mi nombre. Si está vacío, aparece una alerta roja. Sin embargo, una vez que edito el campo de nombre vacío, agrego un nombre y presiono enviar nuevamente, se detecta el campo de ID vacío. Cuando esto suceda, quiero que solo el campo ID esté rojo y que el campo del nombre no siga mostrando un error ya que se han cumplido las condiciones. ¿Cómo puedo hacer eso?
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"; }Una forma sería usar clases CSS.
Defina una clase CSS como:
.error-input { background-color: red; color: white; }entonces puedes usar Javascript para alternar esta clase:
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"); }Lo que puede hacer es ocultar todos los errores antes de la validación:
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; }