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ê.
