asked on

Effectively Display Login Error Message In-front of Login Button

Hello Experts!

How can I effectively display login error message in front of login button as text-danger?

My auth.php is currently echoing "Invalid Login" to a plain page (same script):

<?php

require '../includes/connection.php';

session_start();

// Do we have some POST data
if (!empty($_POST)):

    // Make sure we have some values
    $username = isset($_POST['username']) ? $_POST['username'] : null;
    $password = isset($_POST['password']) ? $_POST['password'] : null;

    // Run the query
    $select = $conn->prepare("SELECT ... ");

    $select->bind_param("s", $username);
    $select->execute();

    // Fetch a User
    $user = $select->get_result()->fetch_object();

    // Check that we found a user
    if ($user):

        // Check the password is correct
        if (password_verify($password, $user->Password)):

            // Update the login
            $login = $conn->prepare("UPDATE ... ");
            $login->bind_param("s", $username);
            $login->execute();

            // Set your session variable
            unset($user->Password); //we don't want the password stored in the session
            $_SESSION['user'] = $user;

            switch ($user->Role):

                case 'Admin':
                    header("location: ../admin/dashboard.php");
                    break;

                case 'Form Master':
                    header("location: ../form_masters/dashboard.php");
                    break;

                case 'Subject Teacher':
                    header("location: ../staff/dashboard.php");
                    break;

            endswitch;

        else:

            // Wrong Password
            echo "Invalid Login";
        
        endif;
    
    else:
    
        // Wrong User
        echo "Invalid Login";
    
    endif;

endif;

Open in new window

login.php

<form method="POST"
          class="form-vertical preloader-submit"
          action="controllers/auth.php">
        
        <h3 class="">Login</h3>
        
        <p>Your Username:</p>
        <div class="control-group">
            <div class="controls">
                <div class="input-icon left">
                    <i class="icon-user"></i>
                    <input class="m-wrap placeholder-no-fix" type="text" placeholder="Username" name="username" required="required"/>
                </div>
            </div>
        </div>
        <p>Your Password:</p>
        <div class="control-group">
            <div class="controls">
                <div class="input-icon left">
                    <i class="icon-key"></i>
                    <input class="m-wrap placeholder-no-fix" type="password" placeholder="Password" name="password" value="" required="required"/>
                </div>
            </div>
        </div>
        <div class="form-actions">
            <button type="submit" name="login_btn" id="login_btn" class="btn green pull-left"><i class="preloader" style="display: none"></i>
                Submit <i class="m-icon-swapright m-icon-white"></i>
            </button>
        </div>
    </form>

Open in new window

Thank you so much.

ste5an

Make the submit an ajax call. When it is successful, do a client-side redirect. Otherwise, use a layered (overlay) div to display the message. Just change the z-index in CSS.

Opeyemi AbdulRasheed

ASKER

@ste5an, could you be more specific, please. Perhaps, an example would be helpful.

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Opeyemi AbdulRasheed

ASKER

I thank you for the help but when I click on submit button with wrong username and password, the error message shows briefly then disappears. I couldn't login with valid username and password. Nothing happens just refreshes the page but no flash of error message.

Opeyemi AbdulRasheed

ASKER

Sir, I'll be fine with Server-Side validation. I'm just looking for a way to display the "Invalid Login" on the login page page using alert-danger. Not displaying on mere white background like attached.

Chris Stanyon

Hey Opeyemi,

That looks like the form is not being sent via AJAX. Have you checked to make sure you have the jQuery library loaded, and that your form has an ID of login

Opeyemi AbdulRasheed

ASKER

Yes sir.

Chris Stanyon

OK. Well looking at your screen shot, the jQuery is not working, so can you post your code - the HTML and the jQuery

Opeyemi AbdulRasheed

ASKER

$(function() {
            $('#loginForm').submit(function(e) {
                e.preventDefault();
                $('#error').hide();
                $.ajax({
                    url : 'controllers/auth.php',
                    method : 'post',
                    dataType : 'json',
                    data : $(this).serialize(),
                })
                .done(function(response) {
                    if (response.success) {
                        window.location = response.message;
                    } else {
                        $('#error').html(response.message).show();
                    }
                });
            });
        });

Open in new window

<div class="content" style="padding-bottom:0;">
    
    <form id="loginForm" method="POST" class="form-vertical preloader-submit" action="">
        
        <h3 class="">Login</h3>
        
        <p>Your Username:</p>
        <div class="control-group">
            <div class="controls">
                <div class="input-icon left">
                    <i class="icon-user"></i>
                    <input class="m-wrap placeholder-no-fix" type="text" placeholder="Username" name="username" required="required"/>
                </div>
            </div>
        </div>
        <p>Your Password:</p>
        <div class="control-group">
            <div class="controls">
                <div class="input-icon left">
                    <i class="icon-key"></i>
                    <input class="m-wrap placeholder-no-fix" type="password" placeholder="Password" name="password" value="" required="required"/>
                </div>
            </div>
        </div>
        <div class="form-actions">
            <button type="submit" name="login_btn" id="login_btn" class="btn green pull-left"><i class="preloader" style="display: none"></i>
                Submit <i class="m-icon-swapright m-icon-white"></i>
            </button>
            <div id="error"></div>
        </div>
    </form>
</div>

Open in new window

Chris Stanyon

That works fine for me.

Load up your page, and make sure you have the WebDev console displayed and then refresh. See if you have any errors in there. It still looks like you haven't got the jQuery library loaded proeprty, or there's some other error going on.

Opeyemi AbdulRasheed

ASKER

My jquery library
jquery.txt

Opeyemi AbdulRasheed

ASKER

Working. I removed the jQuery from <head> tag and placed it right before </body> tag and it works. Sir, what do you mean bu this:

Because you're doing the redirects with JS, you may need to tweak the URL for each of the Roles.

Open in new window

Will have I have to do anything to my Jquery script or auth.php ?

Chris Stanyon

OK. You need to make sure that the jQuery library is loaded before trying to run your jQuery scripts.

In your PHP script, you have this:

$response->message = "../form_masters/dashboard.php";

And then in your jquery script, you have this:

window.location = response.message;

You might have to edit the url in the auth.php script. Try it and see if it works - if it does, no need to change anything :)

Opeyemi AbdulRasheed

ASKER

Thank you so much sir. It redirects to various dashboard based on Role. Words cannot express my gratitude

Chris Stanyon

No worries Opeyemi

Glad it's working for you :)