How to hide error message once the user starts writing in the input field?

Question

so I have made validation form with a input field called password, So the criteria of the password is that the password's length should be atleast 5 characters long. When user submit's the blank input field a error called **Password is too short. is thrown. Now what I want when users again starts writing in the password input field the error should be hidden, in my case I was able to hide error when the input is more than 5 characters ,the error message disappears only when the characters are more than 5.But how can I hide the error when the user starts typing in the input field even though there is only 1 character.

So In conclusion I only want to show error when the user stops typing in input field and when the length of password input is less than 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>

call the validate function after the user finishes the typing .you can take help from [https://stackoverflow.com/questions/4220126/run-javascript-function-when-user-finishes-typing-instead-of-on-key-up] — Nilesh Mishra, Mar 09 '22 at 13:53
@NileshMishra Exactly I did the same thing and then you just commeted the idea. Thanks. — Coder_7, Mar 09 '22 at 14:08

score 0 · Answer 1 · answered Mar 09 '22 at 14:07

I used onkeyup() to hide error when user starts typing but is shown after 4 secs if the password is less than 5 characters and inside the onkeyup() function I used setTimeout(validate,4000) function to call the validate function thus the validate function is called after 4secs and once the length is greater than 5 the error is hidden and validate function won't run

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>

score 0 · Accepted Answer · answered Mar 09 '22 at 14:09

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>

How to hide error message once the user starts writing in the input field?

2 Answers2