Problems with form validation Javascript on a registration style page

Question

I'm having trouble getting my Form Validation events, and associated logic to work.

The current problem lies in the "register" part of my site.

In the browser console i'm getting "registerFName is not defined", but i have a feeling the problem is larger than that.

Any help anyone can provide would be much appreciated.

` $('.loginMessage a').click(function(){ $('form').animate({height:"toggle", opacity: "toggle"}, "slow"); });

// pre-coded users

var existingUsers = 
[
    {   
        firstname: "Gerry",
        lastname: "Agnew",
        username: "GerryA",
        password: "password123",
        email: "gerry@gmit.ie",
        phone:"0833333333"

    },
    {
        firstname: "Sean",
        lastname: "Duignan",
        username: "SeanD",
        password: "password456",
        email: "sean@gmit.ie",
        phone:"0822222222"
    },
    {
        firstname: "Michael",
        lastname: "Duignan",
        username: "MichaelD",
        password: "password789",
        email: "michael@gmit.ie",
        phone:"0844444444"
    }
]

//function setup()
//{
    // setup functions
//}


function dropdown()
{
    document.getElementById("myDropDwn").classList.toggle("show");
}

//=========================================================================

// Validation Events

username.addEventListener('blur', logUserVerify, true);
password.addEventListener('blur', logPassVerify, true);
newFName.addEventListener('blur', fNameVerify, true);
newLName.addEventListener('blur', lNameVerify, true);
newUName.addEventListener('blur', regUserVerify, true);
newPass.addEventListener('blur', regPassVerify, true);
newEmail.addEventListener('blur', emailVerify, true);
newPhone.addEventListener('blur', phoneVerify, true);

//=========================================================================

// Validation error functions

function loginValidate()
{
    if(username == "")
    {
        document.getElementById("login-user-error").innerHTML = "Username required";
        username.focus();
        return false;
    }

    if(password == "")
    {
        document.getElementById("login-pass-error").innerHTML = "Password required";
        password.focus();
        return false;
    }       
}

function registerValidate()
{
    if(registerFName == "")
    {
        document.getElementById("reg-FName-error").innerHTML = "First Name required";
        newFName.focus();
        return false;
    }
    if(registerLName == "")
    {
        document.getElementById("reg-LName-error").innerHTML = "Last Name required";
        newLName.focus();
        return false;
    }
    if(registerUName == "")
    {
        document.getElementById("reg-UName-error").innerHTML = "Username required";
        newUName.focus();
        return false;
    }
    if(registerUName.length < 8)
    {
        document.getElementById("reg-UName-error").innerHTML = "Username must be 8 characters or more";
        newUName.focus();
        return false;
    }
    if(registerPass == "")
    {
        document.getElementById("reg-pass-error").innerHTML = "Password required";
        newPass.focus();
        return false;
    }
    if(registerEmail == "")
    {
        document.getElementById("reg-email-error").innerHTML = "Email required";
        newEmail.focus();
        return false;
    }
    if(registerPhone == "")
    {
        document.getElementById("reg-phone-error").innerHTML = "Phone number required";
        newPhone.focus();
        return false;
    }
}

// end of Validation error functions

//==================================================================================

// Event Functions

function logUserVerify()
{
    if (username != "")
    {
        document.getElementById("login-user-error").innerHTML = "";
        return true;
    }
}
function logPassVerify()
{
    if (password != "")
    {
        document.getElementById("login-pass-error").innerHTML = "";
        return true;
    }
}
function fNameVerify()
{
    if (registerFName != "")
    {
        document.getElementById("login-FName-error").innerHTML = "";
        return true;
    }
}
function lNameVerify()
{
    if (registerLName != "")
    {
        document.getElementById("login-LName-error").innerHTML = "";
        return true;
    }
}
function regUserVerify()
{
    if (registerUName != "")
    {
        document.getElementById("login-UName-error").innerHTML = "";
        return true;
    }
    if (registerUName > 8)
    {
        document.getElementById("login-UName-error").innerHTML = "";
        return true;
    }
}
function regPassVerify()
{
    if (registerPass != "")
    {
        document.getElementById("login-pass-error").innerHTML = "";
        return true;
    }
}
function phoneVerify()
{
    if (registerPhone != "")
    {
        document.getElementById("login-phone-error").innerHTML = "";
        return true;
    }
}
function emailVerify()
{
    if (registerEmail != "")
    {
        document.getElementById("login-email-error").innerHTML = "";
        return true;
    }
}

// end of event functions

//===================================================================================

// Login/Register Functions

function loginUser()
{
    var username = document.getElementById("username").value;
    var password = document.getElementById("password").value;
    var userCheck = false;
    var passCheck = false;

    loginValidate();

    for (i = 0; i < existingUsers.length; i++)
    {


        if(username == existingUsers[i].username)
        {
            document.getElementById("login-user-error").innerHTML = "";
            userCheck = true;
        }
        else if(username != existingUsers[i].username)
        {
            document.getElementById("login-user-error").innerHTML = "Invalid, user does not exist";
            username.focus();
            return false;
        }

        if(password == existingUsers[i].password)
        {
            document.getElementById("login-pass-error").innerHTML = "";
            passCheck = true;
        }
        else if(password != existingUsers[i].password)
        {
            document.getElementById("login-pass-error").innerHTML = "Error, incorrect password";
            password.focus();
            return false;
        }

        if(userCheck == true && passCheck == true)
        {
            document.getElementById("loggedIn-Out").innerHTML = username;
            localStorage.user = username;
            localStorage.pass = password;
            return;
        }
    }
}

function logoutUser()
{
    localStorage.removeItem("user");
    localStorage.removeItem("pass");
    document.getElementById("loggedIn-Out").innerHTML = "Login/Register";
}

function registerUser()
{

    var registerFName = document.getElementById("newFName").value;
    var registerLName = document.getElementById("newLName").value;
    var registerUName = document.getElementById("newUName").value;
    var registerPass = document.getElementById("newPass").value;
    var registerEmail = document.getElementById("newEmail").value;
    var registerPhone = document.getElementById("newPhone").value;

    registerValidate();

    localStorage.regFname = registerFName;
    localStorage.regLname = registerLName;
    localStorage.regUname = registerUName;
    localStorage.regPass = registerPass;
    localStorage.regMail = registerEmail;
    localStorage.regPhone = registerPhone;

    var newUser =
    {
        firstname: registerFName,
        lastname: registerLName,
        username: registerUName,
        password: registerPass,
        email: registerEmail,
        phone: registerPhone
    }

    for(i = 0; i < existingUsers.length; i++)
    {

        if(registerUName == existingUsers[i].username)
        {
            document.getElementById("reg-UName-error").innerHTML = "Username already exists";
            newUName.focus();
            return false;
        }

        if(registerEmail == existingUsers[i].email)
        {
            document.getElementById("reg-email-error").innerHTML = "Email already exists";
            newEmail.focus();
            return false;
        }

    }
    existingUsers.push(newUser);
}

// end of Login/Register Functions

//================================================================================

// Password Strength functions

function passwordStr()
{
    var passValue = document.getElementById("newPass").value;

    if(passValue.length >= 8 && passValue.length <= 10)
    {
        document.getElementById("passStrength").innerHTML = "Weak";
    }
    else if(passValue.length > 10 && passValue.length <= 16)
    {
        document.getElementById("passStrength").innerHTML = "Average";
        document.getElementById("passStrength").style.color = "yellow";
    }
    else if(passValue.length > 16)
    {
        document.getElementById("passStrength").innerHTML = "Strong";
        document.getElementById("passStrength").style.color = "green";
    }
    else
    {
        document.getElementById("passStrength").style.color = "red";
    }
}
var passInput = document.getElementById("newPass");
passInput.addEventListener("input", passwordStr);

Answer 1

I found the problem.

The issue lied with my events, and my if/else structure. The return statements were preventing subsequent logic from being run. I replaced them with a:

var valid true and set valid to false every time.

Then i commented out my events and added an else with an empty "" to replace the errors appearing.

I replaced the if condition the root document.getElement instead of the var name which was not instantiated yet in the function which was causing some errors.