Question

我无法在提交时验证多个输入。

验证（以及在编辑输入时清除验证错误onkeyup）仅适用于第一个输入。

我假设你不能像我一样有很多if语句，但是我无法解决它应该写的方式来验证提交的所有3个输入。它们应该是独立的功能吗？我尝试了多个onsubmit函数，但是再次没有用。

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

稍微修改一下if语句中的流程。

设置有效标志（最初为true），然后在每种情况下，如果验证失败，则将标志修改为false。然后在if条件结束时返回一次标志。

这样，如果元素无效，所有元素都可以获得分配给它们的相关类。

注意：我已将代码改进为＆＃34; reset＆＃34;错误状态，如果用户提交 - 有2个错误，修复一个 - 以便＆＃34;固定＆＃34;一个人仍然没有错误状态。

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

验证多于1个输入

1 个答案: