Reputation: 1

JS function appears to not be executed by HTML form, not sure why

i haven't used JS or HTML in a while now and need to create a sing up page for submitting data to a database. This code is simply for validating the form (client-side). It appears that the JS function is not being executed, i know i am forgetting something somewhere but i cant work out what, has anyone got any ideas?

<html>
<head>
    <script type="text/javascript">
        function validateSignup() {
            var redFeild = "";
            var greenField = "";

            function colourRed(redFeild) {
                document.getElementById(redFeild).style.color="ff0000";
            }

            function colourGreen(greenField) {
                document.getElementById(greenField).style.color="08BB3E";
            }

            var firstV = false;
            var userfirst = document.getElementById("userFirst").value;

            switch (userfirst, firstV) {
                case (userfirst == ""):
                    redFeild = document.getElementById("first");
                    colourRed(redFeild);
                    redFeild = document.getElementById("nameError");
                    colourRed(redFeild);
                    break;
                case (userfirst.match(/^[a-zA-Z]+$/) == false):
                    redFeild = document.getElementById("first");
                    colourRed(redFeild);
                    redFeild = document.getElementById("nameError");
                    colourRed(redFeild);
                    break;
                default:
                    firstV = true;
                    greenField = document.getElementById("first");
                    colourGreen(greenField);
                    greenField = document.getElementById("nameError");
                    colourGreen(greenField);
                    break;
            }

            var lastV = false;
            var userlast = document.getElementById("userLast").value;

            switch (userlast, lastV) {
                case (userlast == ""):
                    redFeild = document.getElementById("last");
                    colourRed(redFeild);
                    redFeild = document.getElementById("nameError");
                    colourRed(redFeild);
                    break;
                case (userlast.match(/^[a-zA-Z]+$/) == false):
                    redFeild = document.getElementById("last");
                    colourRed(redFeild);
                    redFeild = document.getElementById("nameError");
                    colourRed(redFeild);
                    break;
                default:
                    lastV = true;
                    greenField = document.getElementById("last");
                    colourGreen(greenField);
                    greenField = document.getElementById("nameError");
                    colourGreen(greenField);
                    break;
            }

            var emailV = false;
            var useremail = document.getElementById("userEmail").value;

            switch (useremail, emailV) {
                case (useremail == ""):
                    redFeild = document.getElementById("email");
                    colourRed(redFeild);
                    redFeild = document.getElementById("emailError");
                    colourRed(redFeild);
                    break;
                case (useremail.match(/^(([^<>()\[\]\\.,;:\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,}))$/) == false):
                    redFeild = document.getElementById("email");
                    colourRed(redFeild);
                    redFeild = document.getElementById("emailError");
                    colourRed(redFeild);
                    break;
                default:
                    emailV = true;
                    greenField = document.getElementById("email");
                    colourGreen(greenField);
                    greenField = document.getElementById("emailError");
                    colourGreen(greenField);
                    break;
            }

            var usernameV = false;
            var username = document.getElementById("usrname").value;

            switch (username, usernameV) {
                case (username == ""):
                    redFeild = document.getElementById("user");
                    colourRed(redFeild);
                    redFeild = document.getElementById("usernameError");
                    colourRed(redFeild);
                    break;
                case (username.match(/^[a-zA-Z0-9]+$/) == false):
                    redFeild = document.getElementById("user");
                    colourRed(redFeild);
                    redFeild = document.getElementById("usernameError");
                    colourRed(redFeild);
                    break;
                default:
                    usernameV = true;
                    greenField = document.getElementById("user");
                    colourGreen(greenField);
                    greenField = document.getElementById("usernameError");
                    colourGreen(greenField);
                    break;
            }

            var passwordV = false;
            var userpsswd = document.getElementById("userPassword").value;
            var userpsswdC = document.getElementById("userPasswordConfirm").value;

            switch (userpsswd, userpsswdC, passwordV) {
                case (userpsswd || userpsswdC == ""):
                    redFeild = document.getElementById("pass");
                    colourRed(redFeild);
                    redFeild = document.getElementById("passC");
                    colourRed(redFeild);
                    redFeild = document.getElementById("passwordCError");
                    colourRed(redFeild);
                    break;
                case (userpsswd.match(/^.*(?=.{8,})(?=.*[a-z])(?=.*[A-Z])(?=.*\d).*$/) == false):
                    redFeild = document.getElementById("pass");
                    colourRed(redFeild);
                    redFeild = document.getElementById("passC");
                    colourRed(redFeild);
                    redFeild = document.getElementById("passwordError");
                    colourRed(redFeild);
                    break;
                case (userpsswd != userpsswdC):
                    redFeild = document.getElementById("pass");
                    colourRed(redFeild);
                    redFeild = document.getElementById("passC");
                    colourRed(redFeild);
                    redFeild = document.getElementById("passwordError");
                    colourRed(redFeild);
                    break;
                default:
                    passwordV = true;
                    greenField = document.getElementById("pass");
                    colourGreen(greenField);
                    greenField = document.getElementById("passC");
                    colourGreen(greenField);
                    greenField = document.getElementById("passwordError");
                    colourGreen(greenField);
                    break;
            }

            if (firstV && lastV && emailV && usernameV && passwordV == true) {
                return true;
            } else {
                return false;
            }
        }

        var signup = document.getElementById("signup");

        return validateSignup(signup);
    </script>
</head>
<body>
    <div align="center">    
        <form id="signup" name="signup" onsubmit="return validateSignup(this.form)" method="get" action="users.php">
            <h1>Sign Up</h1>
            <label id="first">First Name</label>
            <input type="text" id="userFirst">
            <br>    
            <br>    <label id="last">Last Name</label>
            <input type="text" id="userLast">
            <br> <label id="nameError">First name and last name are required and must contain only upper and lower case letters</label>
            <br>    
            <br>    <label id="email">Email</label>
            <input type="email" id="userEmail">
            <br> <label id="emailError">Email is required and must be valid</label>
            <br>    
            <br>    <label id="user">Username</label>
            <input type="text" id="usrname">
            <br> <label id="usernameError">Username is required and must only contain alphanumeric values</label>
            <br>    
            <br>    <label id="pass">Password</label>
            <input type="password" id="userPassword">
            <br> <label id="passwordError">Password is required and must contain at least one uppercase letter, one lowercase letter, and one number</label>
            <br>    
            <br>    <label id="passC">Confirm Password</label>
            <input type="password" id="userPasswordConfirm">
            <br> <label id="passwordCError">Password and confirmed password must be the same</label>
            <br>    
            <br>    <input type="submit" text="Sign Up">
        </form>
    </div>
</body>

Upvotes: 0

Answers (1)

T.J. Crowder

Reputation: 1074435

 onsubmit="return validateSignup(this.form)"

should be¹

 onsubmit="return validateSignup(this)"

this in the onxyz-attribute-style event handlers on a form element is the form; it doesn't have a form property. (This is true generally: In the onxyz-attribute code, this is the element that attribute is attached to.)

¹ Consider using modern event handling instead, e.g. addEventListener.

Upvotes: 1

JS function appears to not be executed by HTML form, not sure why

Answers (1)

Related Questions