Question

Assuming I have a block of code like this on a login page:

<form action="login_action.php" method="post">
    <div id="account">
        <div class="form-label">Username:</div>
        <div class="form-input"><input name="username" type="text" /></div>
        <div class="form-label">Password:</div>
        <div class="form-input"><input name="password" type="password" /></div>
        <div class="form-submit"><input type="submit" value="Submit" /></div>
    </div>
</form>

The login_action file queries the database with the given credentials and if they are correct performs $_SESSION['username'] = $username;

This works fine. However, if the user provides incorrect credentials, ideally the page would not redirect and instead it would display an error message on the page on the line before username. This is the part I am confused on how to tackle.

Would I instead have to capture the submit button press with JQuery and post the user credentials to the php file with AJAX? This would then get rid of the form on the login page. I suppose then I could return a string specifying whether or not the credentials were valid and if not, it would append a message to the account div that the credentials were incorrect.

Would that be the standard approach to this sort of problem? Since recently discovering AJAX I am using it for almost everything and I’m not sure if in this case it is the ideal solution. Overriding the submit button’s default behavior and removing the form seems kinda hacky to me but I’m not sure. Is this how SO would solve this?

Answer 1

What I normally do is, use condition statement & redirect back to form if the password is incorrect. Assume your form page is form.php, the redirect could be form.php?status=password.
Then you can display an error message in your form

if ($_GET['status'] == 'password')
   echo "Incorrect Password";