0

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);
    }
});

4
  • 1
    Revisando el codigo no he visto nada raro, esta todo bien escrito. Podrias adjuntar el codigo HTML para verlo todo? Commented el 30 ene. 2019 a las 11:29
  • Yo también acabo de probar tu código y no veo nada raro.
    – Kiko_L
    Commented el 30 ene. 2019 a las 11:37
  • El problema está en que al salir del input de tipo nombre muestra la alerta, pero antes de mostrar la alerta ya ha cogido el "foco" el input apellidos. Al mostrar la alerta de nombre pierde el foco y también muestra la alerta... Commented el 30 ene. 2019 a las 17:58
  • 1
    No falla si el efecto blur se dispara al clickar fuera del campo de texto, input, nombre o apellidos. Pero si estás en el campo de texto nombre y, mediante tabulación, sales de éste hacia el input de apellidos se genera el evento blur del input nombre. El focus pasa a estar en el campo apellidos y aquí viene el problema, al mostrar la alerta del evento blur de nombre también se genera un evento blur en el input de apellidos al estar el campo vacío... Commented el 30 ene. 2019 a las 18:35

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.