así que hice un formulario de validación con un campo de entrada llamado contraseña, por lo que el criterio de la contraseña es que la longitud de la contraseña debe tener al menos 5 caracteres. Cuando el usuario envía el campo de entrada en blanco, aparece un error llamado **La contraseña es demasiado corta. es aventado. Ahora, lo que quiero es que cuando los usuarios comiencen a escribir nuevamente en el campo de entrada de contraseña, el error debe estar oculto, en mi caso pude ocultar el error cuando la entrada tiene más de 5 caracteres, el mensaje de error desaparece solo cuando los caracteres tienen más de 5 .Pero, ¿cómo puedo ocultar el error cuando el usuario comienza a escribir en el campo de entrada aunque solo haya 1 carácter?
Entonces, en conclusión, solo quiero mostrar un error cuando el usuario deja de escribir en el campo de entrada y cuando la longitud de la contraseña es inferior a 5
function validate(){ var password = document.getElementById('demo2') var error2= document.getElementById('error2') var flag =true; if(password.value.trim()==""){ // alert('blank password') password.style.border="dotted red" password.style.outline="none" error2.innerHTML ='***Enter Password' flag=false }else if(password.value.trim()!=""){ password.style.border="" } if( password.value.length < 5){ error2.innerHTML ='***Password too short' flag = false; } else if(password.value.length >= 5){ error2.innerHTML = '' flag = true; } // alert(flag); return flag // to maintain state of flag } <form onsubmit="return validate();"> <label for="">Password</label> <p id="error2"></p> <input type="text"name="input2" id="demo2" oninput="return validate();"> <input type="submit" name="input3" id="demo3"> </form>Usé onkeyup() para ocultar el error cuando el usuario comienza a escribir, pero se muestra después de 4 segundos si la contraseña tiene menos de 5 caracteres y dentro de la función onkeyup() usé la función setTimeout(validate,4000) para llamar a la función de validación, por lo tanto, la validación la función se llama después de 4 segundos y una vez que la longitud es mayor que 5, el error se oculta y la función de validación no se ejecutará
function validate(){ var password = document.getElementById('demo2') var error2= document.getElementById('error2') var flag =true; if(password.value.trim()==""){ // alert('blank password') password.style.border="dotted red" password.style.outline="none" error2.innerHTML ='***Enter Password' flag=false }else if(password.value.trim()!=""){ password.style.border="" } if( password.value.length < 5){ error2.innerHTML ='***Password too short' flag = false; } else if(password.value.length >= 5){ error2.innerHTML = '' flag = true; } // alert(flag); return flag // to maintain state of flag } function fun3(){ var error2= document.getElementById('error2') error2.innerHTML='' setTimeout(validate,4000) } <form onsubmit="return validate();"> <label for="">Password</label> <p id="error2"></p> <input type="text"name="input2" id="demo2" oninput="return validate();"onkeyup=fun3();> <input type="submit" name="input3" id="demo3""> </form> let timeout; function typeFinished() { timeout = setTimeout(validate, 2000); } function validate(){ var password = document.getElementById('demo2') var error2= document.getElementById('error2') var flag =true; if(password.value.trim()==""){ // alert('blank password') password.style.border="dotted red" password.style.outline="none" error2.innerHTML ='***Enter Password' flag=false }else if(password.value.trim()!=""){ password.style.border="" } if( password.value.length < 5){ error2.innerHTML ='***Password too short' flag = false; } else if(password.value.length >= 5){ error2.innerHTML = '' flag = true; } // alert(flag); return flag // to maintain state of flag } <form onsubmit="return validate();"> <label for="">Password</label> <p id="error2"></p> <input type="text"name="input2" id="demo2" oninput="return typeFinished();"> <input type="submit" name="input3" id="demo3"> </form>