Exemplo de Verificação Dinâmica com AJAX

Guilherme Catini · Fevereiro 25, 2015

Já me perguntaram várias vezes como fazer para verificar se um e-mail existe no banco de dados sem ter que dar um refresh na tela.

Fiz um exemplo muito simples com um evento AJAX, onde ele verifica o e-mail no evento change e muda o layout do campo para informar o usuário se o endereço está disponível para uso ou não.

Exemplo

http://catini.org/exemplos/verificarRegistro/verificarRegistro.html

HTML

<!doctype html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- jQuery -->
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
  <!-- Arquivos do Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <!-- Minha folha de Estilos -->
  <link rel="stylesheet" href="style.css">
  <!-- Meu arquivo de scripts -->
  <script src="custom.js"></script>
  <title>Verificar Registro</title>
</head>
<body>

<div id="blocoLogin" class="container">

  <div class='row'>
    <div class='col-md-12'>
	  <h4 class='text-center'>Verificar se existe um e-mail cadastrado com ajax no evento change.<br><br>Exemplo: joao@xserver.com</h3>
	</div>
  </div>	

  <div class="row">
    <div class="col-md-12">
      <div class="input-group" id='divEmail'>
	    <span class="input-group input-group-addon"><b>@</b></span>
	    <input autofocus type="text" class="form-control" id="cmpEmail" placeholder="E-mail">
      </div>
	</div>
  </div>
  
</div>

</body>
</html>

CSS

body {
  background-color:#F7F7F7;
}

#blocoLogin {
	width:450px;
	margin:35px auto 0 auto;
}

#falhaLogin {
	text-align:center;
	font-weight:bolder;
	display:none;
}

#sucessoLogin {
	text-align:center;
	font-weight:bolder;
	display:none;
}

JAVASCRIPT

// Início jQuery
$(document).ready(function(e) {
	
	// Evento on change do campo email (Executa quando há alterações no campo e você sai do foco dele)
	// Diferente do evento BLUR , onde ele é executado toda vez que você sai do foco do campo.
	$("#cmpEmail").change(function(e){
		// verifica se existe algum valor no campo
		var vEmail = $("#cmpEmail").val();
		if (vEmail.length > 0) {
			// AJAX para verificar se o login já existe na base de dados.
                        // onde está email: significa o valor do $_POST['email'] no arquivo info.php
                        // onde está vEmail é o valor que está sendo passado como parâmetro
			$.post("info.php", {email: vEmail}, function(retorno) {
				// Caso já exista o email cadastrado adiciono um efeito VERMELHO e seleciono o campo para alteração
				if(retorno){
					$("#divEmail").removeClass("has-success");
					$("#divEmail").addClass("has-error");
					$("#cmpEmail").focus().select();
				} else { // Caso não exista adiciono um efeito VERDE
					$("#divEmail").removeClass("has-error");
					$("#divEmail").addClass("has-success");
				}
			})
		} else { // caso não exista removo os efeitos dos campos
			$("#divEmail").removeClass("has-error");
			$("#divEmail").removeClass("has-success");
		}
		
		
	})


});

PHP

<?php

if ( isset($_POST['email']) ) {

	$vEmail = $_POST['email'];
	

        // nesse momento eu movi um valor constante para verificar o endereço de e-mail por ser apenas um exemplo
	if ( $vEmail == "joao@xserver.com" ) {
		echo true;
	} else {
		echo false;
	}

}

?>

Entrar

Exemplo de Verificação Dinâmica com AJAX

Pergunta

Guilherme Catini

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades