Webpoint

Vou mostrar neste post como validar em tempo real um login antes dele poder digitar a senha. Assim, quando o usuário digitar um login e pressionar TAB ou clicar com o mouse no campo de senha ele será alertado se este login é valido ou não. No exemplo que vou mostrar exibe um alerta, mas você pode fazer de outras maneiras, como mudar a classe do campo, adicionar uma mensagem, dentre outras coisas.

Usando ajax, você pode fazer requisições no servidor em qualquer evento javascript, seja um clique em um link ou um caractere digitado no teclado. Basta usar a imaginação e competência para usar no lugar certo e de uma maneira que facilite a vida, ao invés de complicar.

O raciocínio é o seguinte. Quando o usuário sair do campo de login (evento onBlur do javascript), uma requisição com o método $.post do Jquery será feita, passando o valor digitado no campo de login para ser processado. Se for encontrado algum registro no banco ele retorna em forma de xml o valor, caso contrário retorna outro valor. Esse valor então é processado na função de callback do método $.post e assim pode-se escrever um alerta ou usar o Jquery para fazer o que for preciso para alertar o usuário de que o login está errado.

Com poucas linhas de código é possível fazer isto com Jquery:

$("input[@name=login]").blur(function(){
var login = $(".login").val();
 
$.post("login_request.php",{login: login},
 
function(data){
 
var retorno = parseInt($(data, 'login').text());
 
if(retorno) {
 
alert("login encontrado");
 
// mais ações podem ser
 
// adicionadas aqui para o login
 
// encontrado
 
} else {
 
alert("login não encontrado");
 
// mais ações podem ser
 
// adicionadas aqui para o login
 
// não encontrado
 
}
 
});
 
});

No código acima, o campo com o atributo name com o valor login é selecionado e passado um evento blur do Jquery, que equivale ao evento onBlur do Javascript, ou seja, quando o usuário sair do campo ele é acionado. O valor do campo de login, que possui também uma classe login é guardada na variável login, para ser usado pelo método $.post do Jquery, que irá passar esse valor para o arquivo login_request.php que irá retornar o XML com a resposta do login encontrado ou não. O código do callback aceita como parâmetro data, que é o xml retornado para ser trabalhado com o Jquery, assim nas linhas:

 
var retorno = parseInt($(data, 'login').text());

O jquery seleciona o nó login e pega o valor dele através do método text. Preste bastante atenção na notação $(data,'login'). Ela procura uma tag login com a referência em data(o nó principal do xml, como se fosse o body). O parseInt irá transformar o valor em número, que é 1 para o login encontrado e 0 para o não encontrado. Assim a estrutura condicional abaixo irá emitir dois alertas caso retorne 1(verdadeiro) ou 0(falso).

O código do arquivo PHP encontra-se abaixo:

header('Content-type: text/xml');
 
$login = $_POST['login'];
 
include('global.php');
 
$db = conectar();
 
$consulta = "SELECT login from dados where nome='$login'";
 
$resultado = mysql_query($consulta,$db);
 
$encontrado = mysql_num_rows($resultado);
 
echo '
<principal><login>' . $encontrado . '</login></principal>';

O PHP irá fazer a consulta e irá verificar se há na tabela dados o login com o nome passado pelo método $.post do Jquery. Então ele irá retornar um XML com essa estrutura caso for encontrado:

 
<principal><login>1</login></principal>

Com isto fizemos passamos para o Jquery e trabalhamos como foi explicado acima.

O exemplo abaixo possui os seguintes logins na tabela para teste: alexandre, daniel e joao. Qualquer valor que não seja este digitado no login irá alertar como usuário não encontrado.

Verificação de login com Ajax utilizando o Jquery

Artigos relacionados

• Ajax com o Jquery - Parte 02
• Ajax com o Jquery