Javascript form validation works on one form but doesn't work on another

Question

I made client side form validation for my signup form and there everything works fine. However on my login form the validation doesn't work like it is supposed to. On the login form it only shows the error status messages and only if I enter a correct value will it show the success message and green border. Another problem I have is that the text of the error message is not red or green only the border of the input changes color.The Javascript code is completely the same for the both of these it's only the html that is different.

HTML signup form

<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 for the signup form

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 for the login form( the one that doesn't work like it's supposed to)

<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 for the login form

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

Is there an obvious mistake that I am not noticing?

Another problem I have is when the user enters values which are valid the form does't actually submit any values it because I have servers side php error handlers which are not activated after the form is submited which should be activated. For an example oner php error handler checks if the entered email is already in the database and this error handler wasn't activated even though I used an already used email address. Since I am using to stop the form from submitting before I check the input values preventDefault() and currentTargetSubmit() after I checked them should I use the currentTargetSubmit() for all the input values of a form?

Answer 1

The answer is actually very simple I just forgot to change the variables in my javascript code for the login modal from the variables in the javacript code for the sign up modal