JavaScript form returns correct error messages, however form still submits!

Question

Hi,

I have a login form which correctly returns false and displays the error messages on the screen. However this happens only for a split second before the form is actually submitted; which shouldn't happen!

HTML:

  <div class="wrapper">
        <h1>Login to FootDrive</h1>
        <?php if (isset($error_message)) {
          echo "<p>".$error_message."</p>";
        }
        ?>
        <form action="login.php" name="login" id="name" method="post">
            <div class="social-register">
                <a href="#"><img class="twitter" src="img/twitter.png"></a>
                <a href="#"><img class="facebook" src="img/facebook.png"></a>
            </div>
            <p class="or">or</p>
            <input type="text" id="email" name="user_email" placeholder="Email">
            <span id="erroremail" class="error">Please Enter An Email</span>
            <input type="password" id="password" name="user_password" placeholder="Password">
            <span id="errorpassword" class="error">Please Enter a Password</span>
            <button type="submit" value="Submit" onclick="loginValidate();">Login</button>
            <a href="#">
                <p class="forgot-password">Forgotten your password?</p>
            </a>
    </div>
    </form>

JavaScript:

function loginValidate() {
    var error = 0;

    var erroremail = document.getElementById("erroremail");
    var user_email = document.login.user_email.value;
    var atpos = user_email.indexOf("@");
    var dotpos = user_email.lastIndexOf(".");
    if (user_email === "") {
        erroremail.style.visibility = "visible";
        error = 1;
    } else if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 > user_email.length) {
        document.getElementById("erroremail").textContent="Invalid Email Address";
        erroremail.style.visibility = "visible";
        error = 1;
    } else {
        erroremail.style.visibility = "hidden";
    }

    var errorpassword = document.getElementById("errorpassword");
    var user_password = document.login.user_password.value;
    if (user_password === "") {
        errorpassword.style.visibility = "visible";
        error = 1;
    } else {
        errorpassword.style.visibility = "hidden";
    }

    if (error == 0) {
        return true;
    } else {
        return false;
    }

}

Can't put my finger on why the form is submitting? Any suggestions would be great.

Thanks, James.

Answer 1 · 2016-04-06T20:03:50Z

April 6, 2016 8:03pm

Two ideas: You could try this:

<button type="submit" value="Submit" onclick="return loginValidate();">Login</button>

Or you could put the function in the form's submit event handler the same way:

<form action="login.php" name="login" id="name" method="post" onsubmit="return loginValidate()">

I think as it is now the function returns false, but that doesn't mean that value gets applied to the submit event. It's like saying onclick="false", which won't do anything.

Welcome to the Treehouse Community

Looking to learn something new?

James Barrett

James Barrett

JavaScript form returns correct error messages, however form still submits!

1 Answer

David Bath

David Bath

James Barrett

James Barrett