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>

Have you tried console.log(allowSubmit) to verify it is indeed false before returning the value? — Ted Nyberg
– Ted Nyberg, Commented Apr 9, 2015 at 16:04
Thanks for the replies guys. I was stuck in a meeting, so I didn't get to see them sooner. I'll keep the console.log command in mind when I run into similar issues down the road. And Satish, you were right on the money with the value thing as well. — Fata1Err0r
– Fata1Err0r, Commented Apr 9, 2015 at 17:44

tcigrand · Accepted Answer · 2015-04-09 16:22:35Z

1

A couple things I noticed

Use value instead of Value
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>

edited Apr 9, 2015 at 16:22

answered Apr 9, 2015 at 16:16

tcigrand

2,3872 gold badges16 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Fata1Err0r Over a year ago

Thanks bro! It was certainly a combination between those two things, and now it's working like a champ. Will note this down for future reference. Thanks again for taking time to help.

Fata1Err0r · Accepted Answer · 2015-04-10 15:57:39Z

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>

Thanks for answering bro. I love this approach to it, and it'll certainly be useful for some other things I'll be doing soon. Only problem with it is that, as some others mentioned, you'll have to place quotes around block and change .Value to .value You get a thumbs up from me also though for the alternate approach.

Collectives™ on Stack Overflow

JavaScript form validation issues

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related