Não é possível checar os emails no banco só usando a "API do HTML" (pattern=""
), em WEB a comunicação é toda feita via HTTP, então precisa de uma requisição.
Será necessário fazer isto usando Ajax por exemplo:
function validateEmail(field)
{
//Se o campo estiver vazio ou desabilitado então não valida
if (field.value == "" || field.disabled) return;
field.disabled = true;
var xhr = new XMLHttpRequest;
xhr.open("GET", "checkEmail.php?email=" + encodeURIComponent(emailField.value), true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
if (xhr.responseText == 'disponivel') {
alert('Validou');
} else {
alert('Não validou');
}
} else {
alert('Erro HTTP: ' + xhr.status);
}
}
}
xmlhttp.send(null);
}
No HTML deve ser algo como:
<form>
<input type="email" pattern="[^@]@[^@]$" required onblur="validateEmail(this)">
<button>Cadastrar</button>
</form>
No php (parece que é o que você usa) bastaria retornar uma string como 'disponivel' acaso o email não exista no banco, ou retornar qualquer outra coisa acaso já exista, um exemplo com mysqli:
checkEmail.php
<?php
if (empty($_GET['email'])) {
die('email vazio');
}
$email = $_GET['email'];
if (!preg_match('#^[^@]+[@][@]+$#', $email)) {
die('formato inválido');
}
$mysqli = new mysqli("localhost", "my_user", "my_password", "world");
$query = 'SELECT COUNT(*) as total FROM tabela WHERE email=?';
$stmt = $mysqli->prepare($query);
$stmt->bind_param('s', $email);
$stmt->execute();
$stmt->bind_result($total);
while ($stmt->fetch()) {
if ($total > 0) {
echo 'já cadastrado';
} else {
echo 'disponivel';
}
}