Check an Email Already Exists in Database using Ajax & PHP

In this tutorial, you will learn to check an email is already exists in the database using ajax, PHP & MySQL. Using this functionality, users can easily know whether their email address is already registered or not before the submit form.

If you create a registration form on your website then you have to allow users to register with a unique email. If a user starts to register with an email id that is already stored in the database. But he/she does not remember his/her registration.

Then you can integrate the registered email checking feature in your website form. So that users can easily know whether the entered email id is already registered or not while they start typing their email address into the email input field.

ajax check email exists in database

Table of Contents

How to Check if an Email Already Exists in the database using Ajax, PHP & MySQLi

To start coding for checking email addresses, First of you have to create a table named users with an email column and insert some records into this table.

Learn Also –

Check username availability using ajax & php

How to create dependent dropdown using ajax & php

How to insert data into using ajax & PHP

You can also use your own table that has a column with the name email.

Table Name – users

CREATE TABLE `users` (
  `id` int(10) UNSIGNED PRIMARY KEY NOT NULL AUTO_INCREMENT,
  `firstName` varchar(255) DEFAULT NULL,
  `lastName` varchar(255) DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  `password` varchar(255) DEFAULT NULL,
  `username` varchar(255) DEFAULT NULL,
);

Also, insert the following username into the table

demo123@gmail.com
test1234@gmail.com

1. Connect PHP to MySQL Database

First of all, connect the SQL database to PHP with the help of the following code or in the phpMyAdmin.

File Name – database.php

<?php
$hostname     = "localhost";
$username     = "root";
$password     = "";
$databasename = "codingstatus";
// Create connection
$conn = new mysqli($hostname, $username, $password,$databasename);
// Check connection
if ($conn->connect_error) {
    die("Unable to Connect database: " . $conn->connect_error);
}
?>

2. Create an Email Input Field using HTML

Create an email input field with a required attribute id=”email” to take user input and also create a div with attribute id=”emailStatus” to show a warning message.

You must include the following jquery ajax CDN to run the custom code of ajax

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Also, include the following script link of the ajax-script.js file to run its code while users are typing something into the username input field

<script type="text/javascript" src="ajax-script.js"></script>

File Name – form.php

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<input type="text" placeholder="Email" name="email" id="email">
<div id="emailStatus"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="ajax-script.js"></script>
</body>
</html>

3. Check an Available Email using Ajax

Now, Create a custom function checkEmail(emailInput) with some line of ajax code. Where –

emailInput – It as a parameter that accepts will accept the input field of the username
url: “php-script.php” – This will call the php-script.php file when ajax will be executed
method:”POST”, – username will be sent to the PHP file securely

File Name – ajax-script.js

 function checkEmail(emailInput){
       $.ajax({
        method:"POST",
        url: "php-script.php",
        data:{emailId:emailInput},
        success: function(data){
          $('#emailStatus').html(data);
        }
      });
}

4. Validate Email Input using jQuery

Now, You have to validate email input on the input event that will be executed while users are typing something into the input field. If the email is successfully validated then the ajax custom function checkEmail(emailInput) will be called.

Validation Rule –

username must be –

required
in an email formate

File Name – ajax-script.js

$(document).on('input','#email',function(e){

    let emailInput = $('#email').val();
    let msg;
    if(emailInput.length==0){
      msg="<span style='color:red'>Enter username</span>";
    }
    else if(!(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/).test(emailInput)){
      msg="<span style='color:red'>Email is not Valid</span>";
    }else{
      checkEmail(emailInput);
    }
    $('#emailStatus').html(msg);
});

5. Fetch an Email From the Database using PHP

So, before using it, you will have to understand the following points

php-script.php file is created with some line of PHP & MySQL code to fetch the available email and check it already exists in the database or not. This is called in ajax-script.js like url=”php-script.php” and It will be executed while getting the input value of email from the ajax request.

First of all, You should include database.php file

Then check values of email (that comes from ajax request ) using if-else condition. If It is set and not empty then call a custom function checkEmail($conn, $emailInput) that will return “This email already exists” by matching user input value with the existing email value in the database.

File Name – php-script.php

<?php
include("database.php");

if(!empty(isset($_POST['emailId'])) && isset($_POST['emailId'])){

   $emailInput= $_POST['emailId'];
   checkEmail($conn, $emailInput);
  
}


function checkEmail($conn, $emailInput){

  $query = "SELECT email FROM users WHERE email='$emailInput'";
  $result = $conn->query($query);
  if ($result->num_rows > 0) {
    echo "<span style='color:red'>This Email is alredy exists </span>";
  }
}

6. Check yourself to enter a username

You can check an email is already exists in the database or not by entering something into the input field. If the entered value has already existed in the database then you will get a warning message ” This email is alredy exists”