JavaScript form validation issues

Question

I'm working on a system that will allow users to change their password. Simple enough, but it isn't working as intended. Now granted, I just started learning JavaScript, so it could be a simple mistake on my end. It seems to ignore the JavaScript and submits anyways. If I remove my code and just put return false; in the function's block, it doesn't submit. If I put my code back in, it seems to ignore what I tell it to return and submits.

Right now I'm just putting the form together, then I'll handle the database/php side of it after the basics are complete. I want them to input their old password, new pass, and confirm new. Upon submit, I want JavaScript to validate each box to make sure it isn't empty/null, and then compare the New Pass / Confirm Pass to make sure they match before submitting. I know I can utilize the "required" property of HTML for the input boxes for some of this, and I could do ALL of this with PHP easily, but since I'm learning JavaScript, I wanted to practice this approach.

Thanks in advance!

HTML

<form name="frmChangePass" action="UserSettings.php" method="post" onsubmit="return validatePass()">
        <span>Change Password</span><br>

        <input type="password" name="oldPassword" id="oldPassword">
        <input type="password" name="newPassword" id="newPassword">
        <input type="password" name="confirmPassword" id="confirmPassword">
        <div style="display: none" id="passMismatch"></div>

        <input type="submit" name="submitPass" value="Submit" id="submitPass">

    </form>

JavaScript

<script>
    function validatePass() {
        var nP = document.getElementById("newPassword").Value;
        var cP = document.getElementById("confirmPassword").Value;
        var oP = document.getElementById("oldPassword").Value;
        var allowSubmit = false;

        if (oP == null || oP == "") {
            document.getElementById("passMismatch").innerHTML = "Please input your current password!";
            document.getElementById("passMismatch").style.display = block;
            allowSubmit = false;
        } else if (nP == null || nP == "") {
            document.getElementById("passMismatch").innerHTML = "Please input a new password!";
            document.getElementById("passMismatch").style.display = block;
            allowSubmit = false;
        } else if (cP == null || cP == "") {
            document.getElementById("passMismatch").innerHTML = "Please confirm new password!";
            document.getElementById("passMismatch").style.display = block;
            allowSubmit = false;
        } else if (cP != nP) {
            document.getElementById("passMismatch").innerHTML = "New password mismatch! Try again.";
            document.getElementById("passMismatch").style.display = block;
            allowSubmit = false;
        }
        else {
            document.getElementById("passMismatch").style.display = none;
            allowSubmit = true;
        }

        return allowSubmit;
    }
</script>

Answer 1

You could pass your form into javascript onsubmit callback using this keyword. It gives you possibility to submit your form from code.

Try this:

<form name="frmChangePass" action="UserSettings.php" method="post" onsubmit="validatePass(this); return false;">
    <span>Change Password</span><br>
    <input type="password" name="oldPassword" id="oldPassword">
    <input type="password" name="newPassword" id="newPassword">
    <input type="password" name="confirmPassword" id="confirmPassword">
    <div style="display: none" id="passMismatch"></div>
    <input type="submit" name="submitPass" value="Submit" id="submitPass">
</form>

JS:

<script>
    function validatePass(f) {
        var nP = document.getElementById("newPassword").value;
        var cP = document.getElementById("confirmPassword").value;
        var oP = document.getElementById("oldPassword").value;
        var allowSubmit = false;

        if (oP == null || oP == "") {
            document.getElementById("passMismatch").innerHTML = "Please input your current password!";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        } else if (nP == null || nP == "") {
            document.getElementById("passMismatch").innerHTML = "Please input a new password!";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        } else if (cP == null || cP == "") {
            document.getElementById("passMismatch").innerHTML = "Please confirm new password!";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        } else if (cP != nP) {
            document.getElementById("passMismatch").innerHTML = "New password mismatch! Try again.";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        }
        else {
            document.getElementById("passMismatch").style.display = "none";
            allowSubmit = true;
        }

        if(allowSubmit) {
            f.submit();
        }
    }
</script>

Answer 2

A couple things I noticed

1. Use value instead of Value
2. Place quotes around block and none

---

<script>
    function validatePass() {
        var nP = document.getElementById("newPassword").value;
        var cP = document.getElementById("confirmPassword").value;
        var oP = document.getElementById("oldPassword").value;
        var allowSubmit = false;

        if (oP == null || oP == "") {
            document.getElementById("passMismatch").innerHTML = "Please input your current password!";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        } else if (nP == null || nP == "") {
            document.getElementById("passMismatch").innerHTML = "Please input a new password!";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        } else if (cP == null || cP == "") {
            document.getElementById("passMismatch").innerHTML = "Please confirm new password!";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        } else if (cP != nP) {
            document.getElementById("passMismatch").innerHTML = "New password mismatch! Try again.";
            document.getElementById("passMismatch").style.display = "block";
            allowSubmit = false;
        }
        else {
            document.getElementById("passMismatch").style.display = "none";
            allowSubmit = true;
        }

        return allowSubmit;
    }
</script>