É 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á:
- Monitorar o valor do campo de e-mail no HTML verificando quando houver mudanças no valor;
- 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;
- 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;
- Se a requisição for bem sucedida, verificar o corpo da resposta;
- 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:
- 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;
- Também utilizei o
email.validity
para compor a verificação;
- 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;
- Para fazer a requisição utilizei a API
fetch
; é experimental e a futura substituta do XMLHttpRequest
, mas funciona muito bem utilizando o polyfill;
- 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;
- 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:
- Verificar se a requisição corrente se trata de uma requisição GET;
- Verificar se o valor do e-mail foi informado corretamente;
- Fazer a conexão com o banco de dados;
- Verificar a existência do e-mail na tabela do banco de dados;
- Produzir a resposta a ser enviada ao cliente (navegador);
- 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'}