How to check if the email is registered when typing on the form? [duplicate]

Is it possible to do only with JavaScript?

You can not do this with JavaScript, as you require access to the database to verify that the record exists. That is, some language should be run on the server side - nothing prevents JavaScript, such as NodeJS, but it would be in a different context.

Is it possible to use PHP within JavaScript?

No. This is one of the most basic concepts on the web and many people do not understand it correctly. PHP will run on the server side and JavaScript on the client side. The only way they both communicate is through messages. The format of the message may vary according to the protocol used, but the most common is HTTP. If you need to send a JavaScript value to PHP, you need to send an HTTP request to the server. If you want PHP to return some value for JavaScript, you need to send it through the HTTP response that will be generated on the server.

I describe a little of this context here: How to write values to the MySQL database using PHP?

Then how to proceed?

You should work on both fronts: JavaScript and PHP. Like JavaScript, you should:

const email = document.getElementById("emailInput");
const button = document.getElementById("registerButton");
const messages = document.getElementById("messages");

function validate(email) {
  // Implemente a função de validar e-mail aqui
  return true;
}
      
email.addEventListener("input", function (event) {
  if (this.validity.valid || validate(this.value)) {
    fetch('verifica.php?email=${this.value}')
      .then(response => {
        if (response.ok) {
          return response.json();
        }
        throw new Error("Oops! Algo de errado não está certo...");
      })
      .then(json => {
        if (json.exists) {
          messages.innerHTML += 'E-mail já está cadastrado. Por favor, tente outro.';
        } else {
          messages.innerHTML += 'E-mail disponível.';
          button.disabled = false;
        }
      })
      .catch(error => {
        messages.innerHTML += 'Falha no servidor, por favor, tente novamente mais tarde.';
      });
  }
});

<form action="cadastrar.php" method="POST">
  <input id="emailInput" type="email" name="email" placeholder="Entre com o seu e-mail" required>
  <button id="registerButton" type="submit" disabled>Cadastrar</button>
  <div id="messages"></div>
</form>

Now, on the server side, with PHP, you should:

The code would look something like:

<?php

header('Content-Type: application/json');

try {
    if ($_SERVER['REQUEST_METHOD'] != 'GET') {
        throw new Exception("Não é uma requisição GET");
    }

    $email = filter_input(INPUT_GET, "email", FILTER_VALIDATE_EMAIL);

    if (!$email) {
        throw new Exception("O e-mail informado não é um e-mail válido");
    }

    $mysqli = require("db.php");
    $stmt = $mysqli->prepare("SELECT EXISTS(SELECT 1 FROM emails WHERE email = ?) as 'exists'");
    $stmt->bindParam(1, $email); 
    $stmt->execute();
    $stmt->bind_result($row);

    if ($stmt->fetch()) {
        http_response_code(200);
        $output = $row;
    }
} catch (Exception $e) {
    http_response_code(500);
    $output = ['error' => $e->getMessage()];
} finally {
    echo json_encode($output);
}

So, if all goes well, PHP will return a JSON response in the format below, with a value of 0 if the email is not registered or 1, otherwise with the status code of response 200:

{exists: 0}

However, if an error occurs in the process, the response will have code 500 and a body reporting the error message:

{error: 'O e-mail informado não é um e-mail válido'}

Yes, it is only possible with JavaScript through Ajax (without loading jQuery).

HTML:

Enter a oninput in the field where the e-mail will be typed by calling the function that will send the e-mail to the PHP file:

<input type="email" oninput="checaEmail(this.value)" />

JavaScript:

Create two functions, one to do Ajax and the other to check if the email you typed is valid. Once the email is valid, as you type, Ajax will enter into action sent a request to the file verifica.php (you can use the filename you want, just change in the code below):

// cria a requisição XMLHttpRequest()
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
    http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
    http = new XMLHttpRequest();
}

// função que verifica o campo digitado e faz o Ajax
function checaEmail(email){

   if(checkMail(email)){
      url_="verifica.php?email="+email;
      http.open("GET",url_,true);
      http.onreadystatechange=function(){
         if(http.readyState==4){
            if(http.responseText == "ok"){
               alert("email existe!");
            }else{
               alert("email não existe!");
            }
         }
      }
      http.send(null);
   }

}

// função para verificar validade do e-mail
function checkMail(email) {

    invalidChars = " ~\'^\'\"*+=\|][(){}$&!%/:,;ç";

    if (email == "") {
        return false;
    }

    for (i=0; i<invalidChars.length; i++) {
        badChar = invalidChars.charAt(i);
        if (email.indexOf(badChar,0) > -1) {
            return false;
        }
    }

    lengthOfEmail = email.length;
    if ((email.charAt(lengthOfEmail - 1) == ".") || (email.charAt(lengthOfEmail - 2) == ".")) {
        return false;
    }

    Pos = email.indexOf("@",1);
    if (email.charAt(Pos + 1) == ".") {
        return false;
    }

    while ((Pos < lengthOfEmail) && ( Pos != -1)) {
        Pos = email.indexOf(".",Pos);
        if (email.charAt(Pos + 1) == ".") {
            return false;
        }
        if (Pos != -1) {
            Pos++;
        }
    }

    atPos = email.indexOf("@",1);
    if (atPos == -1) {
        return false;
    }

    if (email.indexOf("@",atPos+1) != -1) {
        return false;
    }

    periodPos = email.indexOf(".",atPos);
    if (periodPos == -1) {
        return false;
    }

    if (periodPos+3 > email.length) {
        return false;
    }
    return true;
}

PHP File:

In the PHP file you should check the database if the email exists and return the string "ok" by issuing a alert in the above JavaScript (this you can change to do as you wish):

<?php
   $email = $_GET['email'];

   if(isset($email)){

      $conexao = mysqli_connect('host do BD', 'usuário', 'senha', 'nome do BD');
      $buscar = "select email from tabela where email='$email'";
      $query = $conexao->query($buscar);
      $numrow = mysqli_num_rows($query);
      if($numrow > 0){
         echo 'ok';
      }
   }
?>

You need to make a select in your bank that takes all the emails, send to the page that makes the registration and with a for, check if the email you typed already exists, something like

No HTML:

<html>
    <script>
        var emails = <?=$emails?>;
        for(i = 0; i < emails.length; i++) { 
            if(emails[i] == email) {
                //Se tiver um email igual...
            } else {
               //Senão...
            }
        }
    </script>
    //Código...

$emails is the result of select

email is the email entered by the user

There are other ways ...