Form only validates one field with javascript

Question

I'm trying to make a simple register form that makes sure the username and password have been entered correctly before submitting. Here's my form:

<form id="register" name="register" action="" method="POST" onsubmit="return validate_account_creation(this)">

    <label> Username
        <input type="text" name="username" />
    </label>

    <label> Password
        <input type="text" name="password" />
    </label>            

    <input type="submit" name="submit" value="Submit" class="button"/>

</form>

And here are my javascript functions:

function validate_username(username) {
        var regex = /[a-zA-Z0-9\-\_]{5,15}/g;
        var str = username;

        if (!regex.test(str)) {
            alert("Your username must be between 5 and 15 characters in length");
            register.username.focus();
            return false;
        }
    }

function validate_password(password) {
        regex = /[a-zA-Z]{5,}[0-9]{1,}/g;
        str = password;

        if (!regex.test(str)) {
            alert("Your password must be at least 6 characters in length and must contain at least 1 number");
            register.password.focus();
            return false;
        }
    }


//Validate register form
function validate_account_creation(form) {



return validate_username(form.username.value);
return validate_password(form.password.value);

return true;

}

The username function works fine and it validates that one every time. However, if the username is correct, the form submits. The second function never activates. If the first function doesn't return anything, shouldn't the second function then be called and validate the second field?

If you don't return anything in a function, it will return undefined. — cbr
– cbr, Commented Nov 22, 2014 at 14:09
Tip: configure a linting tool in your IDE. It should catch dead code in your validate_account_creation() function (multiple returns) — André Werlang
– André Werlang, Commented Nov 22, 2014 at 16:18

John Weisz · Accepted Answer · 2014-11-22 15:09:19Z

2

It's the return statements. A return aborts the rest of the function and returns the result, so your validation should look like:

Javascript

function validate_account_creation(form) {

    var username = validate_username(form.username.value);
    var password = validate_password(form.password.value);

    return username && password; // if both are true, submit form

}

edited Nov 22, 2014 at 15:09

John Weisz

32.2k14 gold badges97 silver badges138 bronze badges

answered Nov 22, 2014 at 14:08

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

2 Comments

cbr Over a year ago

Why not return validate_username(form.username.value) && validate_password(form.password.value)?

adeneo Over a year ago

It's the exact same thing, I just used variables to make it more readable.

Collectives™ on Stack Overflow

Form only validates one field with javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related