2

Tenho um formulário de cadastro, e gostaria que avisasse, assim que o email fosse digitado, se este já consta no Banco de Dados.

Eu pensei em usar uma função JavaScript, com um código PHP dentro que irá buscar se existe o email no Banco, porém não tenho certeza se é possível usar PHP dentro de JavaScript, alguém tem essa informação e caso contrário, é possível usar apenas JavaScript pra isso?

3
  • 1
    Estude sobre AJAX.
    – Woss
    16/11/2017 às 21:42
  • Acho que o mais recomendado seria uma requisição ajax, dentro de uma function blur (do Jquery) no campo email.. estude essas duas técnologias
    – RickPariz
    16/11/2017 às 21:48
  • Veja a minha resposta o passo-a-passo de como fazer Ajax apenas com Javascript. Não esqueça de marcar a resposta se lhe ajudou. Grande abraço!
    – Meu ovo
    17/11/2017 às 6:43

2 Respostas 2

9

É possível fazer somente com JavaScript?

Não é possível fazer isso apenas com JavaScript, pois você demanda do acesso ao banco de dados para verificar se o registro existe. Ou seja, alguma linguagem deve ser executada no lado do servidor - nada impede de ser, também, JavaScript, tal como NodeJS, mas seria em um contexto diferente.

É possível usar PHP dentro do JavaScript?

Não. Esse é um dos conceitos mais básicos da web e muita gente não o compreende corretamente. O PHP vai ser executado no lado do servidor e o JavaScript no lado do cliente. A única maneira que ambos se comunicam é através de mensagens. O formato da mensagem pode variar conforme o protocolo utilizado, mas o mais comum é o HTTP. Se você precisa enviar um valor do JavaScript para o PHP, você precisa enviar uma requisição HTTP para o servidor. Se você quer que o PHP retorne algum valor para o JavaScript, você precisa enviá-los através da resposta HTTP que será gerada no servidor.

Eu descrevo um pouco deste contexto aqui: Como gravar valores no banco de dados MySQL usando PHP?

Então como proceder?

Você deverá trabalhar nas duas frentes: JavaScript e PHP. Como JavaScript, você deverá:

  1. Monitorar o valor do campo de e-mail no HTML verificando quando houver mudanças no valor;
  2. Verificar se o e-mail digitado é válido antes de fazer a requisição para o servidor;
    • Se fizer a requisição sem validar o e-mail, você estará demandando de recursos desnecessários da rede;
  3. Quando o e-mail for válido, fazer uma requisição GET ao servidor;
    • A requisição GET é importante para manter a semântica da aplicação: você quer obter um estado do servidor a partir de valores base;
  4. Se a requisição for bem sucedida, verificar o corpo da resposta;
  5. Se a requisição falhar, você deve informar que se o e-mail já existir, o cadastro irá falhar - ou não permitir que a pessoa faça o cadastro neste momento, visto que o servidor possa estar com problemas;

Assim, no código, podemos ter algo semelhante a:

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>

Considerações sobre o código:

  1. Não implementei a função de validar e-mail para não estender muito o código e por essa ser facilmente encontrada na web;
  2. Também utilizei o email.validity para compor a verificação;
  3. Utilizei o evento input, pois este, teoricamente, é disparado para qualquer evento de entrada que possa modificar o valor do campo, seja via mouse, teclado ou touch; para um comportamento mais preciso da aplicação, é importante que você defina manualmente todos os eventos desejados, visto que os navegadores ainda não seguem à risca a especificação W3C ou WHATWG neste quesito;
  4. Para fazer a requisição utilizei a API fetch; é experimental e a futura substituta do XMLHttpRequest, mas funciona muito bem utilizando o polyfill;
  5. Inicio a aplicação com o botão desabilitado e somente o habilito quando o e-mail for verificado e estiver disponível. Isso evita que o usuário faça requisições desnecessárias ao servidor, com e-mail não válido ou já existente, aumentando o desempenho da aplicação e melhorando a usabilidade;
  6. Se a requisição de verificação falhar, por qualquer motivo, deixo o botão desativado para evitar que o usuário faça o cadastro, pois parto do princípio que, se ocorreu algum erro com a verificação, irá ocorrer, também, com o cadastro, então previno o usuário desta situação embaraçosa;

Já, no lado do servidor, com PHP, você deve:

  1. Verificar se a requisição corrente se trata de uma requisição GET;
  2. Verificar se o valor do e-mail foi informado corretamente;
  3. Fazer a conexão com o banco de dados;
  4. Verificar a existência do e-mail na tabela do banco de dados;
  5. Produzir a resposta a ser enviada ao cliente (navegador);
  6. Enviar efetivamente a resposta;

O código seria algo como:

<?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);
}

Assim, se tudo ocorrer bem, o PHP irá retornar uma resposta JSON no formato abaixo, com o valor 0 se o e-mail não estiver cadastrado ou 1, caso contrário, com o código de status da resposta 200:

{exists: 0}

Porém, se algum erro ocorrer no processo, a resposta terá código 500 e um corpo informando a mensagem de erro:

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

Sim, é possível apenas com JavaScript através de Ajax (sem carregar jQuery).

HTML:

Coloque um oninput no campo onde será digitado o e-mail chamando a função que irá enviar ao arquivo PHP o e-mail a ser consultado:

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

JavaScript:

Crie duas funções, uma para fazer o Ajax e outra para verificar se o e-mail que foi digitado é válido. Assim que o e-mail for válido, à medida em que vai digitando, o Ajax entrará em ação enviado uma requisição ao arquivo verifica.php (você pode usar o nome de arquivo que quiser, basta alterar no código abaixo):

// 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;
}

Arquivo PHP:

No arquivo PHP você deve verificar no banco se o e-mail existe e retornar a string "ok", emitindo um alert no JavaScript acima (isso você pode alterar a fazer como quiser):

<?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';
      }
   }
?>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .