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):

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):

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):

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

Compartilhe
Share on Facebook3Share on Google+0Tweet about this on TwitterPin on Pinterest0Email this to someone