Javascript form validation not loading PHP page

Question

I have the following form in a PHP page

<form action="login.php" method="post">
    School: <input type="text" name="schoolInput"><div id="erschool"></div><br>
    Username: <input type="text" name="usernameInput"><div id="eruser"></div><br>
    Password: <input type="text" name="passwordInput"><div id="erpass"></div>
    <input type="button" name="loginSubmit" value="submit" onclick="return validateLogin()">
</form>

My validation looks like this

function validateLogin() {
    var school = document.getElementsByName("schoolInput")[0].value
    var username = document.getElementsByName("usernameInput")[0].value
    var password = document.getElementsByName("passwordInput")[0].value
    var failed = false;
    if(!school){
        document.getElementById("erschool").innerHTML = "No school entered";
        failed = true;
    }
    if(!username){
        document.getElementById("eruser").innerHTML = "No username entered";
        failed = true;
    }
    if(!password){
        document.getElementById("erpass").innerHTML = "No password entered";
        failed = true;
    }
    if(failed){
        return failed;
    }
    return true;
}

The JS in the validation works as it activates the error messages. However, if the form is completed correctly, it doesn't load login.php as it should.

I'm running the app on Heroku for testing.

What am I doing wrong?

FluffyKitten · Accepted Answer · 2020-07-18 08:46:56Z

You need to use <button type=submit"> to submit the form. Also, you can move the validation into the form. i.e.:

<form action="login.php" method="post"  onclick="return validateLogin()">
    School: <input type="text" name="schoolInput"><div id="erschool"></div><br>
    Username: <input type="text" name="usernameInput"><div id="eruser"></div><br>
    Password: <input type="text" name="passwordInput"><div id="erpass"></div>
    <button type="submit" name="loginSubmit" value="submit">
</form>

Also, your validation function is wrong - it will always return true (so the form will always be submitted):

if(failed){
    return failed;   // if failed is true, then return TRUE...
}
return true;         // ....otherwise return TRUE!!

I presume you mean to return !failed so if failed is true then you return false?

You don't actually need to check the value for failed either- you can just return !failed:

if failed is true, then !failed will return false so the form is not submitted
if failed is false, then !failed will return true so the form is submitted

dkellner · Accepted Answer · 2020-07-18 09:02:31Z

How to make it work

What you probably wanted to achieve is:

<button type="button" onclick="if(validateLogin()) this.form.submit()">

This way, your form only gets submitted if the function returns TRUE. (Which, as @FluffyKitten pointed out, will always be the case so you have to fix the validation function too.)

There are more than one ways to validate a form. My favorite is giving the form an onsubmit handler, and the syntax you used on the button looks like you were trying to mix this technique with the button-click validation method. Form onsubmit way looks like this:

<form onsubmit="return validateLogin()">
    ...
    ...
    <button type="submit">
</form>

These are 2 separate ways.

Method 1: form onsubmit=return valid() + button type=submit
Method 2: form + button type=button onclick=if(valid()) submit()

Improve validateLogin

I'd suggest some refactoring here, both for readability and ease of use.

function validateLogin() {

    var checkEmpty = function(name) {

        var element = document.getElementsByName(name+"Input")[0];
        if(element.value !== "") return false; // return if not empty

        var errorField = document.getElementById("er"+name);        
        errorField.innerHTML = "No value for "+name;
        return true;

    }
    
    if(checkEmpty("school"   )) return false;
    if(checkEmpty("username" )) return false;
    if(checkEmpty("password" )) return false;
    return true;

}

Collectives™ on Stack Overflow

Javascript form validation not loading PHP page

2 Answers 2

Comments

How to make it work

Improve validateLogin

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

How to make it work

Improve validateLogin

Comments

Your Answer

Sign up or log in

Post as a guest

Related