JavaScript Form Validation Not Returning False

Question

If any of the form validations do not match, it is supposed to add one to a counter. At the end, if the counter is greater than zero, it is supposed to return false and not allow the form to submit.

I've written the code in Brackets. I've tried using both a hosted site and live preview to test the code, both of which result in the same issue. I've tried turning the function into a variable. I've tried different methods of taking the variables from the form. I've tried simply copying a different solution I found to this through google. Nothing seems to be working to get the validation to work as intended.

I apologize ahead of time for the wall of code.

JavaScript:

function checkAll(){
    var userNameVerification = "0-9a-zA-Z"; //must include upper and lowercase so that user may use caps
    var phoneNumberVerification = /^\(?([0-9]{3})\)?[-. ]?([0-9]{3})[-. ]?([0-9]{4})$/; //taken from w3resoucre for the setup of phone number verification
    var checker = 0;
    var userName = document.regForm.userName.value;
    var password = document.regForm.passwordvalue;
    var passwordVerify = document.regForm.passwordVerify.value;
    var firstName = document.regForm.firstName.value;
    var lastName = document.regForm.lastName.value;
    var email = document.regForm.email.value;
    var phoneNumber = document.regForm.phoneNumber.value;
    var signUpNewsletter = document.regForm.phoneNumber.value;


    //check if username is empty
    if(userName == ""){
        document.getElementById('errorUserName').innerHTML = "Username cannot be empty.";
        checker++;
    }

    //make sure username uses proper characters
    if(!userName.match(userNameVerification)){
        document.getElementById('errorUserName').innerHTLM = "Enter only numbers and letters.";
        checker++;
    }
    //check if password is empty or is shorter than 8 characters
    if(password == "" || password.lenth < 8) {
        document.getElementById('errorPassword').innerHTML = "Password should be at least 8 characters long.";
        checker++;
    }

    //make sure confirmation of password is not shorter than 8 and is not empty
    if(passwordVerify == "" || passwordVerify.lenth < 8) {
        document.getElementById('errorPasswordVerify').innerHTML = "Confirmation Password should be at least 8 characters long.";
        checker++;
    }
    //passwords match
    if(password != passwordVerify){
        document.getElementById('errorPasswordVerify').innerHTML = "Passwords do not match.";
        checker++;
    }

    //check if first name is empty
    if(firstName == ""){
        document.getElementById('errorFirstName').innerHTML = "First name cannot be empty.";
        checker++;
    }

    //check if last name is empty
    if(lastName == ""){
        document.getElementById('errorLastName').innerHTML = "Last Name cannot be empty.";
        checker++;    

    }

    //check if email is empty
    if(email == ""){
        document.getElementById('errorEmail').innerHTML = "Email cannot be empty.";
        checker++;
    }

    //check that @ and . are present
    if(email.indexOf("@",0) < 0 || email.indexOf(".",0) < 0){
        document.getElementById('errorEmail').innerHTML = "Enter a valid email address.";
        checker++;
    }

    //check if phone number is empty
    if(phoneNumber == ""){
        document.getElementById('errorPhoneNumber').innerHTML = "You must enter a phone number.";
        checker++;
    }

    //make sure phone number is in proper format
    if(!phoneNumber.match(phoneNumberVerification)){
        document.getElementById('errorPhoneNumber').innerHTML = "Enter a valid phone number in (XXX)XXX-XXXX format.";
        checker++;
    }

    //make sure one of the radio buttons are clicked
    if((signUpNewsletter[0].checked == false) && (signUpNewsletter[1].checked == false)){
        document.getElementById('errorSignUp').innerHTML = "Please select one of the options.";
        checker++;
    }

    //see if checker is greater than 0; if so, return false
    if(checker > 0){
        return false;
    }

} 

HTML:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <title>Invitation Page</title>
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script type="text/javascript" src="js/registration.js"></script>
</head>

<body>
    <header>
        <div class="top">
            <a class="logo" href="index.html">CapellaVolunteers<span class="dotcom">.org</span></a>
        </div>
        <nav>
            <ul class="topnav">
                <li><a href="index.html">Home</a>
                </li>
                <li><a href="invitation.html">Invitation</a>
                </li>
                <li><a href="volunteer.html">Volunteers</a>
                </li>
                <li><a href="gallery.html">Gallery</a>
                </li>
                <li><a href="registration.html" class="active">Registration</a>
                </li>
            </ul>

        </nav>
    </header>
    <section id="pageForm">
        <form name="regForm" action="confirmation.php" method="POST">

            <label for="userName">Username:</label>
            <input type="text" name="userName" placeholder="Enter your Username" />
            <span id="errorUserName"></span><br>

            <label for="Password">Password:
            </label>
            <input type="password" name="password" placeholder="Enter your Password" />
            <span id="errorPassword"></span><br>

            <label for="passwordVerify">Verify your Password:
            </label>
            <input type="password" name="passwordVerify" placeholder="Enter in your Password again" />
            <span id="errorPasswordVerify"></span><br>

            <label for="firstName">First Name:
            </label>
            <input type="text" name="firstName" placeholder="Enter your First Name" />
            <span id="errorFirstName"></span><br>

            <label for="lastName">Last Name:
            </label>
            <input type="text" name="lastName" placeholder="Enter your Last Name" />
            <span id="errorLastName"></span><br>

            <label for="email">Email:
            </label>
            <input type="text" name="email" placeholder="Enter your Email Address" />
            <span id="errorEmail"></span><br>

            <label for="phoneNumber">Phone Number
            </label>
            <input type="text" name="lastName" placeholder="Enter your Phone Number" />
            <span id="errorPhoneNumber"></span><br>

            <label for="signUpNewsletter">Sign up for newsletter:
            </label>
              <input type="radio" name="signUpNewsletter" value="Yes" checked> Yes 
                <input type="radio" name="signUpNewsletter" value="No"> No
                <span id="errorSignUp"></span><br>
            <input type="submit" value="Next step" onsubmit="return checkAll();">
        </form>
    </section>

    <footer>This events site is for IT3515 tasks.
    </footer>
</body>
</html>

I expect the form to not submit when the information is not validated (for example, I try submitting an empty form, which it should not allow me to do), but it actually submits the form no matter what information is inserted into the form.

Answer 1

Add your onsubmit call to form instead of button, it works. Don't know about your logic, but it works. Run this code!

 function checkAll(){ var condition = false; if(condition){ alert ('All ok'); return true; } alert('Something wrong'); return false; } 

  <section id="pageForm"> <form name="regForm" action="confirmation.php" method="POST" onsubmit="return checkAll();"> <label for="userName">Username:</label> <input type="text" name="userName" placeholder="Enter your Username" /> <span id="errorUserName"></span><br> <label for="Password">Password: </label> <input type="password" name="password" placeholder="Enter your Password" /> <span id="errorPassword"></span><br> <label for="passwordVerify">Verify your Password: </label> <input type="password" name="passwordVerify" placeholder="Enter in your Password again" /> <span id="errorPasswordVerify"></span><br> <label for="firstName">First Name: </label> <input type="text" name="firstName" placeholder="Enter your First Name" /> <span id="errorFirstName"></span><br> <label for="lastName">Last Name: </label> <input type="text" name="lastName" placeholder="Enter your Last Name" /> <span id="errorLastName"></span><br> <label for="email">Email: </label> <input type="text" name="email" placeholder="Enter your Email Address" /> <span id="errorEmail"></span><br> <label for="phoneNumber">Phone Number </label> <input type="text" name="lastName" placeholder="Enter your Phone Number" /> <span id="errorPhoneNumber"></span><br> <label for="signUpNewsletter">Sign up for newsletter: </label> <input type="radio" name="signUpNewsletter" value="Yes" checked> Yes <input type="radio" name="signUpNewsletter" value="No"> No <span id="errorSignUp"></span><br> <input type="submit" value="Next step" > </form> </section>