Validação de campos sem refresh com AJAX

Nesse artigo iremos desenvolver um formulário da qual o usuário deverá preencher com seus dados, e quando ele tirar o foco do campo iremos verificar se o que foi digitado tem relação com o que o campo pede. Tudo isso será feito com a tecnologia AJAX, que nos permite fazer requisições com o servidor sem a necessidade de atualizar a página. Os arquivos utilizados aqui estão disponíveis para download no final do artigo.

Veja o que será feito, clicando aqui.

 

1. Formulário

Primeiramente vamos criar nosso formulário (index.html):

<html>
<head>
<title>Validação de campos com AJAX</title>
<script type="text/javascript" src="ajax/funcs.js"></script>
</head>
<body>

Login: <br /> <input type="text" id="login" onblur="validarDados('login', document.getElementById('login').value);" />
<div id="campo_login"> </div> <br />

Email: <br /> <input type="text" id="email" onblur="validarDados('email', document.getElementById('email').value);" />
<div id="campo_email"> </div> <br />

CPF: <br /> <input type="text" id="cpf" onblur="validarDados('cpf', document.getElementById('cpf').value);" />
<div id="campo_cpf"> </div> <br />

</body>
</html>

Em cada campo que for criado deverá ser chamado a função validarDados() (essa será abordada mais adiante) quando o usuário tirar o foco do campo, ou seja, no evento onblur. E também para cada campo deverá ser criado uma div onde será exibido a mensagem de erro.

 

2. Javascript

Agora iremos criar nosso javascript que será o responsável pela requisição com o servidor (ajax/funcs.js):

// Variável que receberá o objeto XMLHttpRequest
var req;

function validarDados(campo, valor) {

// Verificar o Browser
// Firefox, Google Chrome, Safari e outros
if(window.XMLHttpRequest) {
   req = new XMLHttpRequest();
}
// Internet Explorer
else if(window.ActiveXObject) {
   req = new ActiveXObject("Microsoft.XMLHTTP");
}

// Aqui vai o valor e o nome do campo que pediu a requisição.
var url = "ajax/validacao.php?campo="+campo+"&valor="+valor;

// Chamada do método open para processar a requisição
req.open("Get", url, true);

// Quando o objeto recebe o retorno, chamamos a seguinte função;
req.onreadystatechange = function() {

	// Exibe a mensagem "Verificando" enquanto carrega
	if(req.readyState == 1) {
		document.getElementById('campo_' + campo + '').innerHTML = '<font color="gray">Verificando...</font>';
	}

	// Verifica se o Ajax realizou todas as operações corretamente (essencial)
	if(req.readyState == 4 && req.status == 200) {
	// Resposta retornada pelo validacao.php
	var resposta = req.responseText;

	// Abaixo colocamos a resposta na div do campo que fez a requisição
	document.getElementById('campo_'+ campo +'').innerHTML = resposta;
	}

}

req.send(null);

}

Vamos a explicação do código:

Linha 4: Criamos a função validarDados() que receberá como parametros o campo que será necessário para colocar a resposta na div correta e o valor para a verificação.

Linha 8 a 14: É aqui que criamos o XMLHttpRequest, responsável pela requisição. Lembrando que deve ser criado tanto para IE quanto para os outros (Firefox, Google Chrome…).

Linha 17: Definimos a variável url com o arquivo PHP que fará a validação (ajax/validacao.php), o nome do campo e o valor do mesmo, e esses serão enviados através do método GET.

Linha 20: Aqui processamos a requisição, ou seja, é onde o valor é enviado ao arquivo PHP que fará a validação.

Linha 23: Quando receber a resposta do servidor, será chamado uma função para exibir a resposta na div correspondente ao campo.

Linha 26 a 28: Exibe a mensagem “Verificando” enquanto a resposta é processada.

Linha 31 a 34: Caso tudo tenha ocorrido bem, coloca a resposta do servidor em uma variável chamada resposta.

Linha 36: Simplesmente coloca a resposta na div correspondente ao campo.

 

3. PHP

Agora num tem segredo para quem já conhece PHP, basta apenas receber os valores e verificar se são válidos (ajax/validacao.php):

<?php
// Campo que fez requisição
$campo = $_GET['campo'];
// Valor do campo que fez requisição
$valor = $_GET['valor'];

// Verificando o campo login
if ($campo == "login") {

	if ($valor == "") {
		echo "Preencha o campo com seu login";
	} elseif (strlen($valor) > 28) {
		echo "O login deve ter no máximo 28 caracteres";
	} elseif (strlen($valor) < 4) {
		echo "O login deve ter no minímo 4 caracteres";
	} elseif (!preg_match('/^[a-z\d_]{4,28}$/i', $valor)) {
		echo "O login deve conter somente letras e numeros.";
	}

}

// Verificando o campo email
if ($campo == "email") {

	if (!eregi("^[a-z0-9_\.\-]+@[a-z0-9_\.\-]*[a-z0-9_\-]+\.[a-z]{2,4}$", $valor)) {
		echo "Preencha com um email válido"; //
	}

}

// Verificando o campo CPF
if ($campo == "cpf") {

	if (!eregi("^([0-9]){3}.([0-9]){3}.([0-9]){3}-([0-9]){2}$", $valor)) {
		echo "Digite um CPF válido";
	}

}

// Acentuação
header("Content-Type: text/html; charset=ISO-8859-1",true);
?>

Linha 3 e 5: Lá no javascript enviamos o campo e o valor através do método GET, ou seja, basta apenas recupera-los normalmente.

Linha 8: Caso o campo seje igual a login, será executado as ações em relação ao login. O mesmo será feito com os outros campos, somente mudando o tipo de validação.

Linha 41: É muito freqüente problemas com caracteres especiais, por isso é necessário definir o charset como ISO-8859-1.

 

4. Finalizando

Talvez o artigo tenha sido um pouco complicado caso você esteje começando agora com AJAX, porém eu lhe aconselho a aprender um pouco mais sobre essa tecnologia, pois com ela podemos tornar a web uma lugar muito mais interativo. Espero que esse artigo tenha sido útil a você.

Download dos arquivos