Validating more than 1 input

Question

I am having trouble validating multiple inputs onsubmit.

Validation (and also clearing the validation error onkeyup when that input is edited) is working for the first input only.

I assume you can't have numerous if statements laid out like I have, but I can't work out the way it should be written in order to validate all 3 inputs onsubmit. Should they be separate functions? I tried multiple onsubmit functions but again that didn't work.

My Fiddle

JS

function contactForm() {
    var theForm = document.forms.contact;

    var errorUsername = document.getElementById('username-error');
    var usernameInput = document.getElementById('username');

    var errorPassword = document.getElementById('password-error');  
    var passwordInput = document.getElementById('password');

    var errorEmail = document.getElementById('email-error');
    var emailInput = document.getElementById('email');

    //clear validation error from usernameInput
    theForm.onkeyup = function() {
        if (usernameInput.value.length === 0) return;
            errorUsername.style.display = 'none';
            usernameInput.className = 'form__input rounded-4';
        };

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

        //Check for password
        if (passwordInput.value.length === 0) {
            errorPassword.style.display = 'block';
            passwordInput.className = 'form__input form__input--red rounded-4';
            return false;
        } else {
            return true;
        };

        //Check for email
        if (emailInput.value.length === 0) {
            errorEmail.style.display = 'block';
            emailInput.className = 'form__input form__input--red rounded-4';
            return false;
        } else {
            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 id="password" name="password" type="password" class="form__input rounded-4" placeholder="Password">
                <div id="password-error" class="input__error">!</div>               
            </div>      
            <div class="input__holder">     
                <input id="email" name="email" type="text" class="form__input rounded-4" placeholder="E-mail">
                <div id="email-error" class="input__error">!</div>              
            </div>
            <button type="submit" id="" class="submit-button rounded-4">Submit</button>
        </form>

Answer 1

Just modify your flow in the if statement a bit.

Set a flag for valid (initially true ), then in each condition, modify the flag to be false if it fails validation. Then return the flag once at the end of the if condition.

This way, all elements can get the relevant class assigned to them if they are not valid.

NOTE: I've improved the code to "reset" the error states, in case a user submits - has 2 errors, fixes one - so that the "Fixed" one will not still have the error state.

theForm.onsubmit = function() {
    // Set initial "valid" state flag
    var valid = true;

    // reset all "error" styles / messages
    errorUsername.style.display = 'none';
    usernameInput.className = 'form__input rounded-4';

    errorPassword.style.display = 'none';
    passwordInput.className = 'form__input rounded-4';

    errorEmail.style.display = 'none';
    emailInput.className = 'form__input rounded-4';

    // Now check the form and assign error styles as appropriate
    //Check for username
    if (usernameInput.value.length === 0) {
        errorUsername.style.display = 'block';
        usernameInput.className = 'form__input form__input--red rounded-4';
        valid = false;
    } 

    //Check for password
    if (passwordInput.value.length === 0) {
        errorPassword.style.display = 'block';
        passwordInput.className = 'form__input form__input--red rounded-4';
        valid = false;
    }

    //Check for email
    if (emailInput.value.length === 0) {
        errorEmail.style.display = 'block';
        emailInput.className = 'form__input form__input--red rounded-4';
        valid = false;
    }  

    return valid;
};