Login check email and password separately

In this tutorial, we are going to teach you how you can check email and password separately during login like we have in Gmail. For design, we will be using Bootstrap, you can find the necessary CSS and JS files in the attached source files below.

Video tutorial:

We will create 2 forms having id “emailForm” and “passwordForm“. The first form will have an email address field and a submit button. And the second form will have a hidden email field, a password field, and a submit button. The second form will be hidden by default. When the first form is submitted, we will send an AJAX request to the server which will check if the email exists and send the response back. If the response is successful, then we will set the value in hidden email field of the second form, hide the first form and display the second form.

<form id="emailForm" onsubmit="return checkEmail();">
 
    <h1>Login</h1>
 
    <div class="form-group">
        <label>Email</label>
        <input type="email" name="email" class="form-control">
    </div>
 
    <input type="submit" value="Next" class="btn btn-primary">
</form>
 
<form id="passwordForm" onsubmit="return doLogin();" style="display: none;">
 
    <h1>Login</h1>
 
    <input type="hidden" name="email" id="verifiedEmail">
 
    <div class="form-group">
        <label>Password</label>
        <input type="password" name="password" class="form-control">
    </div>
 
    <input type="submit" value="Login" class="btn btn-primary">
 
</form>

In Javascript, create the following function:

function checkEmail() {
    var form = document.getElementById("emailForm");
 
    var ajax = new XMLHttpRequest();
    ajax.open("POST", "server.php", true);
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  
    ajax.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            var response = JSON.parse(this.responseText);
            if (response.status == "success") {
 
                // set value in hidden email field in second form
                document.getElementById("verifiedEmail").value = form.email.value;
 
                // hide the first form
                form.style.display = "none";
 
                // show second form
                document.getElementById("passwordForm").style.display = "";
 
            } else {
                alert(response.message);
            }
        }
    };
 
    ajax.send("email=" + form.email.value + "&checkEmail=1");
    return false;
}

Now create a server.php file (or whatever you are using for login) and validate the email:

<?php
 
$connection = mysqli_connect("localhost:8889", "root", "root", "classicmodels");
  
if (isset($_POST["checkEmail"]))
{
    $email = $_POST["email"];
      
    $sql = "SELECT * FROM users WHERE email = '" . $email . "'";
    $result = mysqli_query($connection, $sql);
 
    if (mysqli_num_rows($result) > 0)
    {
        echo json_encode(array(
            "status" => "success",
            "message" => "Correct email"
        ));
        exit();
    }
    else
    {
        echo json_encode(array(
            "status" => "error",
            "message" => "Email not found"
        ));
        exit();
    }
}
 
?>

Now for second form submission, we have to create another function in Javascript:

function doLogin () {
 
    var form = document.getElementById("passwordForm");
 
    var ajax = new XMLHttpRequest();
    ajax.open("POST", "server.php", true);
    ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  
    ajax.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
         
            var response = JSON.parse(this.responseText);
            alert(response.message);
 
            if (response.status == "success") {
                window.location.href = "";
            }
        }
    };
 
    ajax.send("email=" + form.email.value + "&password=" + form.password.value + "&doLogin=1");
    return false;
}

And we have to create its handler in server.php:

if (isset($_POST["doLogin"]))
{
    $email = $_POST["email"];
    $password = $_POST["password"];
      
    $sql = "SELECT * FROM users WHERE email = '" . $email . "' AND password = '" . $password . "'";
    $result = mysqli_query($connection, $sql);
 
    if (mysqli_num_rows($result) > 0)
    {
        echo json_encode(array(
            "status" => "success",
            "message" => "Successfully logged in"
        ));
        exit();
    }
    else
    {
        echo json_encode(array(
            "status" => "error",
            "message" => "Invalid credentials"
        ));
        exit();
    }
}

Now if you run the file, you will see an input field for email, if you enter the wrong email it will display you an error message. As soon as you enter correct email, it will display the second form which will ask for password. Then that second form is submitted, then the user will be fully authenticated. It will first check the email and then the password separately.

You can start session or cookies depends on your requirements. The script is secure, you can try changing the values from inspect element and it will still work fine.

You can learn how to prevent user for login for 30 seconds after 3 failed login attempts.

Prevent user from login for 30 seconds after 3 failed login attempts – PHP

[wpdm_package id=’478′]

Post Views: 361