Skip to content

AdnanTech

Programming tutorials

Menu
  • Python
  • PHP
    • Laravel
    • WordPress
  • Javascript
    • React JS
    • Node.js
    • Vue JS
  • Databases
    • MySQL
    • MongoDB
  • Mobile apps
    • Android
    • iOS
  • Tutorials
    • Ticketing system
    • Chat app
  • Blog
  • Projects
  • API
    • Social network API
  • Services
    • Hash Generator
    • World Clock
    • Word Counter
    • Currency Converter
    • Financial Ledger
    • Time Difference
    • Stopwatch & Timer
    • Google Maps
  • SAAS
    • Job Entry

Login check email and password separately

by adnanafzal565Posted onJune 18, 2020

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: 384
Posted in JavascriptTagged ajax, javascript, login, php

Published by adnanafzal565

View all posts by adnanafzal565

Post navigation

Prev PHP vs Javascript – Performance test
Next Shopping cart – PHP | Cookies

Recent Posts

  • SAAS in React + Laravel – Job Entry
  • Show selected images from input type file – React
  • Add dynamic rows in React
  • Soft Delete 🗑 – Node.js, MongoDB
  • 2 ways to loop through a number in React

Recent Comments

  1. canada pharmaceuticals online generic on PDF view in browser and export as file – PHP
  2. System on (no title)
  3. adnanafzal565 on (no title)
  4. adnanafzal565 on (no title)
  5. System on (no title)

Archives

  • May 2025
  • March 2025
  • February 2025
  • January 2025
  • November 2024
  • September 2024
  • August 2024
  • July 2024
  • June 2024
  • May 2024
  • April 2024
  • March 2024
  • February 2024
  • January 2024
  • November 2023
  • September 2023
  • August 2023
  • July 2023
  • June 2023
  • May 2023
  • April 2023
  • December 2022
  • November 2022
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • May 2022
  • April 2022
  • March 2022
  • February 2022
  • January 2022
  • December 2021
  • November 2021
  • October 2021
  • September 2021
  • August 2021
  • July 2021
  • June 2021
  • May 2021
  • April 2021
  • March 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020

Categories

  • Android
  • Complete Projects
  • CSS
  • FFmpeg
  • Git
  • htaccess
  • HTML
  • iOS
  • Javascript
  • Laravel
  • Leap Motion Controller
  • MEVN
  • MongoDB
  • MySQL
  • Node.js
  • PHP
  • Python
  • React JS
  • Swift
  • Tips & Tricks
  • Uncategorized
  • Vue JS
  • WordPress
Email: support@adnan-tech.com
AdnanTech © All rights reserved. 2013 - 2025