Clearing validation errors JavaScript

Question

I have been attempting to clear messages once the user has successfully input completed the required validation rules, however I can't seem to clear all the validation errors, I did look around and tried what was suggested however it doesn't seem to have worked. I thought by placing empty innerHTML strings might work as I said it had been suggested within other posts

 <form action ="" method="POST">
    <span id="tryErr"></span><br>
    <input type="text" id="username" placeholder="Username"><br>
    <span id="usernameErr"></span><br>
    <input type="text" id="email" placeholder="Email address"><br>
    <span id="emailErr"></span><br>
    <input type="password" id="password" placeholder="Password"><br>
    <span id="passwordErr"></span><br>
    <input type="submit" value="Submit" onclick=" return confirmValidation();">
</form>    

JS

 <script type="text/javascript">      

    function validateUsername(username, error){
        var username = document.getElementById("username").value,
        error = document.getElementById("usernameErr");

       if(username == null || username==""){   
        return error.innerHTML = "Username is required";
        return false;
       }
        else if(!username.match(/^[0-9a-z]+$/) || username.length < 3){
        return error.innerHTML = "Username must be alphanumeric and three characters long";
        return false;
       }
       else{
           return error.innerHTML = "";
           return true;
       }
    }

    function validatePassword(password, error){
        var password = document.getElementById("password").value,
        error = document.getElementById("passwordErr");
       if(password == null || password==""){
        return error.innerHTML = "Password is required";
        return false;
       }
        else if(password.length < 7){
        return error.innerHTML = "Password must be seven characters long";    
        return false;
       }
       else{
           return error.innerHTML = ""; 
           return true;
       }
    }

    function validateEmail(email, error){
        var email = document.getElementById("email").value,
        apos = email.indexOf("@"),
        dotpos = email.lastIndexOf("."),
        error = document.getElementById("emailErr");

        if(email == null || email==""){
        return error.innerHTML = "Email is required";
        return false;
       }
        if (apos < 1  ||  dotpos-apos < 2 || dotpos == (email.length - 1)){
            return error.innerHTML = "Please enter a valid email";
            return false;
        } 
        else{
            return error.innerHTML = "";
            return true;
        }
    }


    function confirmValidation(e){
        event.preventDefault(e);    
        if(!validateUsername()){
            return false;
        }
        if(!validatePassword()){
            return false;
        }
         if(!validateEmail()){
           return false;
        }
        else{
            //do something clever here

        }
    }

    </script>

Answer 1

You should use onchange event on input types . Like

<input type="text" id="username" placeholder="Username " onchange="validateUsername()">