Javascript error checking bug. (form validation)

Question

I'm trying to validate multiple fields in a form. For the most part my code seems to work, but upon further testing I noticed some strange behavior. For whatever reason My form seems to go through if the last field is working, in this case all other error checks are ignored. also on a side note my messages don't seem to update, after a wrong submission, is submitted again with different errors. Can anyone please explain to me why this happens?

here is my submit button.

<button type="submit" onclick="return validateRegistrationForm()" >
    Register
</button>

Script:

function validateRegistrationForm()
{
    return validateUsername(), validatePassword(), validateConfirmPassword();
}

function validateUsername()
{
    var x=document.forms["registration"]["userName"].value;if (x == null || x == "")
    {
        document.getElementById("usernameWarnings").innerHTML = "Username is Required!";
        return false;
    }
    else if (x.length < 6 || x.lenth > 10)
    {
        document.getElementById("usernameWarnings").innerHTML = "Must be Between 6 to 10 Characters!";
        return false;
    }
    else
    {
        return true;
    }
}

function validatePassword()
{
    var y=document.forms["registration"]["userPassword"].value;
    if (y == null || y == "")
    {
        document.getElementById("passwordWarnings").innerHTML = "Password is Required!";
        return false;
    }
    else if (y.length < 6 || y.lenth > 10)
    {
        document.getElementById("passwordWarnings").innerHTML = "Must be Between 6 to 10 Characters!";
        return false;
    }
    else
    {
        return true;
    }
}
function validateConfirmPassword()
{
    var y=document.forms["registration"]["userPassword"].value;
    var k=document.forms["registration"]["cUserPassword"].value;
    if (k == null || k == "")
    {
        document.getElementById("confirmPasswordWarnings").innerHTML = "Confirm Password is Required!";
        return false;
    }
    else if (y != k)
    {
        document.getElementById("confirmPasswordWarnings").innerHTML = "Passwords not the same";
        return false;
    }
    else
    {
        return true;
    }
}

What exactly is this return validateUsername(), validatePassword(), validateConfirmPassword(); — j08691
– j08691, Commented Apr 18, 2013 at 23:20

mchail · Accepted Answer · 2013-04-19 00:16:23Z

2

I think you want:

return validateUsername() && validatePassword() && validateConfirmPassword();

The &&s are necessary to make sure all conditions are met.

UPDATE

Not all error messages are showing up because javascript "short-circuits" the && operator. This means if the left side of the && evaluates to false, the right side won't even be run (since the output of the operation is guaranteed to be false at that point). Here's how you could make sure they are all executed:

function validateRegistrationForm() {
    var valid = true;
    valid = validateUsername() && valid;
    valid = validatePassword() && valid;
    valid = validateConfirmPassword() && valid;
    return valid;
}

edited Apr 19, 2013 at 0:16

answered Apr 18, 2013 at 23:23

mchail

8315 silver badges12 bronze badges

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

4 Comments

NateDM Over a year ago

I tried This and it fixes my problem (Thank you!), however it creates a different problem, Now it only shows one error message at a time. I'm guessing I must still have something else faulty in my logic.

mchail Over a year ago

I've updated my solution to address your last comment. The new code will ensure that all your validations are run, and all error messages will be displayed.

NateDM Over a year ago

This works, Thank you for your help, also not that it matters but on the validateConfirmPassword() you missed the () in your post. Again thank you for your help, and explanation.

mchail Over a year ago

You're right! Good catch. And good luck with the rest of your project. I've updated my answer for posterity's sake.

Collectives™ on Stack Overflow

Javascript error checking bug. (form validation)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related