表單驗證：刪除onkeydown後輸入錯誤

Question

我正在爲我的第一個驗證工作，非常基本。

如果您將'用戶名'輸入留空，它會將用戶名輸入邊框變成紅色，並且還會在輸入中放置警告圖標。

我試圖'刪除'當用戶開始輸入導致錯誤時驗證失敗時添加的內容。

所以情況是：用戶離開用戶名空白，點擊提交然後用戶名輸入的邊界變紅色，並出現一個錯誤圖標。然後他們回去並將他們的用戶名添加到用戶名輸入後的第一個字符輸入到用戶名框我想讓紅色邊框和錯誤圖標消失。

但是我的嘗試都失敗了

My Fiddle

JS

function contactForm() { 
    var theForm = document.forms.contact; 
    var errorUsername = document.getElementById('username-error'); 
    var usernameInput = document.getElementById('username'); 

    theForm.onsubmit = function() { 
    if (theForm.username.value === '') { 
     errorUsername.style.display = 'block'; 
     usernameInput.className = 'form__input form__input--red rounded-4'; 
     return false; 
    } else { 
     theForm.username.onkeydown = function() { 
     errorUsername.style.display = 'none'; 
     usernameInput.className = 'form__input rounded-4'; 
     }; 
     return true; 
    }; 
    }; 

}; 
contactForm(); 

HTML

<form name="contact" action="#" novalidate> 
    <div class="input__holder"> 
    <input id="username" name="username" type="text" class="form__input rounded-4" placeholder="Username"> 
    <div id="username-error" class="input__error">!</div> 
    </div> 
    <div class="input__holder"> 
    <input name="password" type="password" class="form__input rounded-4" placeholder="Password"> 
    </div> 
    <div class="input__holder"> 
    <input name="email" type="text" class="form__input rounded-4" placeholder="E-mail"> 
    </div> 
    <button type="submit" id="" class="submit-button rounded-4">Submit</button> 
</form> 

CSS

太長，小提琴:)

Answer 1

您可以在JavaScript的

document.onkeyup = function() { 
    var errorUsername = document.getElementById('username-error'); 
    var usernameInput = document.getElementById('username'); 
    if (usernameInput.value.length === 0) return; 
    errorUsername.style.display = 'none'; 
    usernameInput.className = 'form__input rounded-4'; 
} 

這裏搗鼓這樣添加的東西： https://jsfiddle.net/12apmo5j/12/

我覺得這個解決您的問題:)