一旦用戶開始在輸入欄位中書寫，如何隱藏錯誤訊息？

所以我用一個名為密碼的輸入欄位制作了驗證表單，所以密碼的標準是密碼的長度至少應該是 5 個字符。當用戶提交空白輸入欄位時，會出現一個名為 **Password is too short 的錯誤。被拋出。現在我想要什么，當用戶再次開始在密碼輸入欄位中寫入時，錯誤應該被隱藏，在我的情況下，當輸入超過 5 個字符時，我能夠隱藏錯誤，只有當字符超過 5 個時，錯誤訊息才會消失.但是當用戶開始在輸入欄位中輸入時，即使只有1個字符，我該如何隱藏錯誤。

所以總而言之，我只想在用戶停止輸入輸入欄位并且密碼輸入的長度小于 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>

uj5u.com熱心網友回復：

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>

uj5u.com熱心網友回復：

當用戶開始輸入時，我使用 onkeyup() 隱藏錯誤，但如果密碼少于 5 個字符，則會在 4 秒后顯示，并且在 onkeyup() 函式內我使用 setTimeout(validate,4000) 函式呼叫驗證函式，因此驗證函式在 4 秒后被呼叫，一旦長度大于 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

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

標籤：javascript html

上一篇：在元素上單擊獲取子元素的文本并使用jquery或純javascript在輸入欄位中傳遞它

下一篇：如何更改HTML中的部分而不在鏈接中獲得“#”？