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>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>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>