Tengo un formulario con varios campos de tipo input que quiero validar al salir de éstos. Para ser más concretos, tengo tres campos, nombre, apellidos y dirección.
He programado tres eventos blur, uno para cada campo, mediante el método addEventListener("blur", () => {});
Dentro de la función anónima compruebo que el contenido del campo sea vacío, en cuyo caso lanzo una alerta.
Pues bien, al hacer la comprobación en la web dejando el primer campo vacío me lanza las tres alertas, una detrás de otra...
var nombre = document.getElementById("nombre");
var apellidos = document.getElementById("apellidos");
var alerta = "Cuidado, este campo es de rellenado obligatorio. El formulario no será ";
alerta += "enviado sin un valor válido para dicho campo.";
nombre.addEventListener("blur", () => {
if (nombre.value == "")
{
alert(alerta);
}
});
apellidos.addEventListener("blur", () => {
if (apellidos.value == "")
{
alert(alerta);
}
});
HTML
para verlo todo?