Tienes dos errores bastante sutiles, sobre todo el segundo.
1) La variable
entrar no la estás declarando en ningún lugar. Debes declarar la variable
entrar localmente (es decir, dentro de la función) e iniciarla a
false. De esta forma, cada vez que se dispare el evento submit del formulario, la variable comenzará en false y cambiará a true si se cumple alguna de esas dos condiciones.
2) Las
Arrow Functions de ES6 no son solamente una abreviación de las funciones normales, tienen algunas peculiaridades más, como por ejemplo, utilizan el
this léxico.
Aquí hay una explicación a fondo. La solución es usar funciones normales en este caso.
El código corregido resulta:
Código Javascript
:
Ver originalconst nombre = document.getElementById("name")
const cldne = document.getElementById("cldne")
const form = document.getElementById("form")
const parrafo = document.getElementById("warnings")
form.addEventListener("submit", function(e){
var entrar = false; // declarar e inicializar variable
e.preventDefault()
let warnings = ""
parrafo.innerHTML = ""
if(nombre.value.length < 4){
warnings +=`El nombre es muy corto <br>`
entrar= true
}
if(cldne.value.length < 8){
warnings +=`El nombre es muy corto <br>`
entrar= true
}
if(entrar){
parrafo.innerHTML= warnings
}else{
this.submit();
}
})
