Javascript 表单验证适用于一种表单但不适用于另一种表单

Question

我为我的注册表单进行了客户端表单验证，一切正常。 但是，在我的登录表单上，验证并没有像预期的那样工作。 在登录表单上，它只显示错误状态消息，只有当我输入正确的值时，它才会显示成功消息和绿色边框。 我遇到的另一个问题是错误消息的文本不是红色或绿色，只有输入的边框会改变颜色。Javascript 代码对于这两个完全相同，只是 html 不同。

HTML 报名表

<form id="signup-form" class="form" method="POST" action="./includes/signup.inc.php">
                   
                    <div class="mb-3 input-control">
                        <label for="full-name">Full name\User name</label><br>
                        <p>*You can only have on user name per e-mail account</p>
                        <input type="text" class="form-control" id="full-name" name="full-name"
                               placeholder="John Smith">
                        <small class="message" id="message-full-name"></small>
                        <br>
                    </div>
                    <div class="mb-3 input-control">
                        <label for="email">Email</label>
                        <input type="email" class="form-control" id="email" name="email"
                               placeholder="JohnSmith@gmail.com">
                        <small class="message" id="message-email"></small>
                        <br>
                    </div>

                    <div class="mb-3 input-control">
                        <label for="password">Password</label>
                        <input type="password" class="form-control" id="password" name="password"
                               placeholder="Password">
                        <small class="message" id="message-password"></small>
                        <br>
                    </div>

                    <div class="mb-3 input-control">
                        <label for="pwdRepeat">Password repeat</label>
                        <input type="password" class="form-control" id="pwdRepeat" name="pwdRepeat"
                               placeholder="Retype Password">
                        <small class="message" id="message-pwdRepeat"></small>
                        <br>
                    </div>

                    <a href="./includes/reset-password-form.php">Forgot your password?</a>

                    <div class="modal-footer">
                        <button type="reset" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="submit" id="submit" class="btn btn-primary" name="submit">Register now</button>
                    </div>

                    <script src="./js/signup_error_handler.js"></script>

                </form>

Javascript 报名表

const form = document.getElementById('signup-form');
const name = document.getElementById('full-name');
const email = document.getElementById('email');
const password = document.getElementById('password');
const password_repeat = document.getElementById('pwdRepeat');


form.addEventListener('submit', e => {

    if (validateInputs()) {
        e.currentTarget.submit();
    } else {
        e.preventDefault();

    }

});


function validateInputs() {
    //Get the value from inputs
    const nameValue = name.value.trim();
    const emailValue = email.value.trim();
    const passwordValue = password.value.trim();
    const passwordRepeatValue = password_repeat.value.trim();
    let return_value = false;

    //These variables are set with one when the value of the input field is correct
    let name_check = 0;
    let email_check = 0;
    let password_check = 0;
    let password_repeat_check = 0;

    if (nameValue === '') {
        //Show error and set error class
        setError(name, 'Your name cannot be empty');
    } else {
        //Add success class
        setSuccess(name);
        name_check = 1;
    }

    if (emailValue === '') {
        //Show error and set error class
        setError(email, 'Email field cannot be empty');
    } else if (!isEmail(emailValue)) {
        setError(email, 'Email is not valid');
    } else {
        //Add success class
        setSuccess(email);
        email_check = 1;
    }

    if (passwordValue === '') {
        //Show error and set error class
        setError(password, 'Password field cannot be empty');
    } else if (passwordValue.length <= 6) {
        setError(password, 'Please enter a longer password');

    } else {
        //Add success class
        setSuccess(password);
        password_check = 1;
    }

    if (passwordRepeatValue === '') {
        //Show error and set error class
        setError(password_repeat, 'Password repeat field cannot be empty');
    } else if (passwordValue !== passwordRepeatValue) {
        setError(password_repeat, 'The passwords do not match');
    }else if (passwordRepeatValue.length <= 6){
        setError(password_repeat,"Repeated password needs to be longer")
    } else {
        //Add success class
        setSuccess(password_repeat);
        password_repeat_check = 1;
    }

    if (name_check === 1 && email_check === 1 && password_check === 1 && password_repeat_check === 1) {
        return_value = true;
    } else {
        return_value = false;
    }

    return return_value;


}


function setError(element, message) {
    element.className = "form-control error";
    const small = document.getElementById("message-" + element.id);
    small.classList.remove('success');

    //Add error message and icon
    small.innerHTML = message + ' <i class="fas fa-exclamation-circle">';
    //Add error class
    small.classList.add("error");


}

const setSuccess = (element) => {
    element.className = "form-control success";
    const small = document.getElementById("message-" + element.id);
    small.classList.remove('error');

    //Add success icon
    small.innerHTML = '<i class="fas fa-check-circle">';
    //Add success class
    small.classList.add("success");

}

function isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}

Html 用于登录表单（无法正常工作的表单）

<form id="login-form" action="./includes/login.inc.php" method="POST">
                    
                    <label for="login-email" class="call-form-label">
                        Email:
                    </label>
                    <input type="email" class="form-control" name="email" id="login-email" placeholder="Email">
                    <small class="message" id="message-login-email"></small>
                    <br>
                    <label for="login-password" class="call-form-label">
                        Password:
                    </label>
                    <input type="password" class="form-control" name="password" id="login-password" placeholder="Password">
                    <small class="message" id="message-login-password"></small>
                    <br>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                <button type="submit" name="login-submit" id="login-submit" class="btn btn-primary">Login</button>
                <hr>
                <p>Did not receive Your Verification Email?
                    <a href="./resend-email-verification.php">Resend</a>
                </p>
            </div>
            </form>

Javascript 用于登录表单

const login_form = document.getElementById('login-form');
const login_email = document.getElementById('login-email');
const login_password = document.getElementById('login-password');

login_form.addEventListener('submit', e => {

    if (login_validateInputs()) {
        e.currentTarget.submit();
    } else {
        e.preventDefault();
    }

});

function login_validateInputs() {
    //Get the value from inputs
    const login_email_value = login_email.value.trim();
    const login_password_value = login_email.value.trim();

    //These variables are set with one when the value of the input field is correct
    let login_email_check = 0;
    let login_password_check = 0;

    if (login_email_value === '') {
        //Show error and set error class
        login_setError(login_email, "Email field cannot be empty");
    } else if (!login_isEmail(login_email_value)) {
        login_setError(login_email, "Email is not valid");
    } else {
        //Add success class
        login_setSuccess(login_email);
        login_email_check = 1;
    }

    if (login_password_value === '') {
        //Show error and set error class
        login_setError(login_password, 'Password field cannot be empty');
    } else if (login_password_value.length <= 6) {
        login_setError(login_password, 'Please enter a longer password');

    } else {
        //Add success class
        login_setSuccess(password);
        login_password_check = 1;
    }

    if (login_password_check === 1 && login_email_check === 1) {
        return_value = true;
    } else {
        return_value = false;
    }

    return return_value;
}

function login_setError(element, message) {
    element.className = "form-control error";
    const small = document.getElementById("message-" + element.id);
    small.classList.remove('success');

    //Add error message and icon
    small.innerHTML = message + ' <i class="fas fa-exclamation-circle" >';
    //Add error class
    small.classList.add("error");
}

const login_setSuccess = (element) => {
    element.className = "form-control success";
    const small = document.getElementById("message-" + element.id);
    small.classList.remove('error');

    //Add success icon
    small.innerHTML = '<i class="fas fa-check-circle">';
    //Add success class
    small.classList.add('success');
}

function login_isEmail(email) {
    return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}

有没有我没有注意到的明显错误？

我遇到的另一个问题是，当用户输入有效的值时，表单实际上并没有提交任何值，因为我有服务器端 php 错误处理程序，这些处理程序在提交表单后未激活，应该被激活。 例如，一个 php 错误处理程序检查输入的 email 是否已经在数据库中，并且即使我使用了一个已经使用过的 email 地址，这个错误处理程序也没有被激活。 因为我在检查输入值 preventDefault() 和 currentTargetSubmit() 之前使用停止提交表单，所以我应该对表单的所有输入值使用 currentTargetSubmit() 吗？

Answer 1

答案其实很简单，我只是忘了将登录模式的 8822996504788 代码中的变量更改为注册模式的 javacript 代码中的变量