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 '
' . $encontrado . '';
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:
<login>1</login>
Com isto fizemos passamos para o Jquery e trabalhamos como foi explicado acima
Seria interessante utilizar JSON neste script.
Sim, é uma boa opção, mas já notei que geralmente quem está iniciando tem mais dificuldade em JSON, mas aqui é um caso muito simples, só para dar um ponto de partida mesmo.
Mto interessante teu blog cara, tava precisando encontrar mais pessoais experientes em jQuery…
a proposito, tu foi comentado lah no grupo oficial, viu lah??
Estou sem tempo para ler teus posts, mas amanha mesmo, varrerei todo.
Muito obrigado Rafael e acabei de ver o comentário do Rey e já fiz a tradução e coloquei aqui no blog, dá uma olhada nos posts que pode ter coisa boa para você aí, se tiver qualquer dúvida ou sugestão, não hesite em falar.
O grupo realmente é muito bom, pena que não é acessível a todos por que é em inglês e ai que entra o esforço de difundir o que acontece lá e tornara acessível para nós. Não deixe de participar por que é com os comentários que realmente vejo que estão lendo e me anima cada vez mais… abraços!
Gostaria desse codigo completo do exemplo tem como?
menegaro@msn.com
@Valter: No post tem todos os códigos necessários para o funcionamento do script. Abraços….
Ja li e reli mas n encontro, de onde vem o global.php?
@Hugo: Desculpe Hugo, o global apenas tem uma função chamada conectar que faz a conexão com o banco de dados. Você pode fazer da maneira que achar conveniente. Abraços e espero ter ajudado…
Ôpa! Muito bom o post!
Uma dúvida, como você fez o redirecionamento, após validar os campos?
Quando faço requisições ajax e valido os dados com php não consigo redirecionar o usuário para outra página.
Já tentei usar o header, window.location, meta refresh, mas nada…
Abraços!
@fabiano: Por que você está querendo redirecionar? A ferramenta verifica previamente se existe o usuário, quando estiver ok o botão de enviar fará a autenticação normalmente. Ainda não é seguro efetuar um login inteiramente com ajax por que os dados são passados por javascript e eles ficam abertos. Você não precisa redirecionar o usuário, apenas deixe-o saber se este usuário está disponível e faça o login normalmente. Espero ter ajudado e boa sorte…
Boa noite Alexandre,
Então, no meu caso o redirecionamento pode ser útil não só para login, mas também quando se concluí um cadastro e os dados em seguida, serão exibidos em uma lista. O usuário poderia receber uma mensagem do tipo ” Cadastro concluído ” e após alguns segundos ser redirecionado para a lista e visualiza-la. No caso do login, utilizo a requisição em Ajax para passar as variáveis para uma página em php, por método POST e nessa página faço a validação no BD. ( A validação no BD é feita em PHP). Após a validação, gostaria de redirecionar o usuário automaticamente para uma próxima página, mas só consigo exibir um link onde ele clica e abre uma nova página já dentro da sessao.
Não sei se fui muito claro..heheh
Mas agradeço a atenção.
Abraços!
@fabiano: Você pode fazer o cadastro normal, e verificar o login por ajax. Se você enviar por post usuário e senha, esta senha vai ficar exposta, pois não existe uma encriptação oficial para ela que seja reconhecida pelo PHP e pelo banco. Acho que você deveria pensar na segurança primeiro. Boa sorte…
Alexandre, obrigado pelas dicas!
Pensarei melhor sobre isso.
Em relação ao redirecionamento, você sabe me indicar onde posso encontrar material falando sobre redirecionamento com Ajax?
Como disse, pode ser útil para mim em outras situações.
Abraços!
@fabiano: andei dando uma pesquisada e não achei nada concreto. Muitas pessoas levantaram este problema e houve várias restrições e problemas, como na requisição ajax a resposta não funcionar corretamente o location.href ou window.location. Deve haver maneiras melhores de fazer isto.
Alexandre
vc saberia se tem diferença com Asp
por exemplo…na pagina psso fazer a verificação no banco..tal
mas queria saber como enviar de volta pra pagina q tem o Jquery
vlw
@Caio: Não tem diferença, o lado servidor precisa apenas enviar uma respota para o jQuery na forma de XML por exemplo e o jQuery retornar. A requisição precisaria ser para um arquivo asp que teria um content-type XML e retornaria um xml que o jQuery poderia tratar facilmente, como no exemplo dado. Espero que tenha ajudado, boa sorte…
Tenho uma duvida…
Consigo usar esta função no asp
ex
tenho certas informaçoes são mostradas na pagina dependendo do codigo
e ha certos campos que podem ser feitas alterações e estas só são feitas qdo o usuario clica no botão atualizar se não fizer isto obviamente não é atulizado.
mas estoutendo problemas pq as pessoas alteram dados e não pede para atualizar.
gostaria de saber se esta funçao da para ser usanda num input name fazendo a comparação com o banco e se não for imediatamente avisar apos inserção.
Como não conheco muito bem a linguagem queria saber se conigo fazer atraves da sua função.
obrigada, se não for pedir muito tenho urgencia
Eli
Obrigada
@Elienai: Você está dizendo atualizar os dados no momento em que são modificados? Por exemplo quando o usuário sai do input os dados serem atualizados?
Sim isso mesmo na linguagem asp tem como?
se tiver poderia me mandar o codigo
meu input name é esse:
” type=”text” class=”TextoCampoFormulario” id=”Qtd_” tabindex=”” value=”” size=”3″ Opcao=”numero” nQtd_Num=”1″ Campo=”Qtd”>
obrigada
” type=”text” class=”TextoCampoFormulario” id=”Qtd_” tabindex=”” value=”” size=”3″ Opcao=”numero” nQtd_Num=”1″ Campo=”Qtd”>
@Elienai: Não existe exatamente um código. Você precisa entender o funcionamento e implementar de acordo com o sistema. Neste caso a cada evento que o usuário sai do input (blur) você atualiza o banco de dados com os dados. Caso tenha modificado, retorne com sucesso em um formato de dados como XML ou JSON e alerte o usuário. Tenha cautela em implementar um sistema assim para não ter dor de cabeça depois. Abraços e boa sorte.
Artigo muito bom… so faltou uma forma melhor de acessar os dados no banco de dados, pois da forma que foi exposto acaba induzindo a falha de SQL Injection, mas entendo que esse nao era o objetivo do artigo.
Tenho um problema com este tipo de processo, tenho um fomrulário gerado pelo php assim serial[] mas não consigo fazer ele enviar os códigos para verificar no banco de dados.
se eu por assim serial ele manda somente o primeiro.
Alguém conhece algum tutorial que mostre isso?
@Gilberto: o que você quer dizer com serial?
Boas
Parabens primeiro que tudo.
Estou com um problema, tentei colocar o seu codigo conforme indicado, mas nao estou conseguindo por a funcionar.
Ja verifiquei o sql, e retorna dados, mas no seu codigo diz sempre que nao retorna nada.
Experimentei fazer um alert(retorno) e ele me da a mensagem NaN apenas.
E so da isso se tiver o header desactivado.
Se colocar o header como voce tem no ficheiro .php, não me da sequer mensagem nenhuma.
Será que me pode ajudar com esta situacao?
Desde ja agradeço
Continue o bom trabalho.
cpts
SLIFE
@slife: O Header é necessário e você precisa verificar se está retornando um xml válido.
Por favor me ajuda.
Já uso a validação e consigo saber se o registro existe ou não.
O meu problema é o seguinte: Quero que quando um login existir que o nome do usuário (ou qualquer outra conteúdo que eu consiga pegar via “select” na tabela do usuário) seja mostrado e solicitando que um novo login seja digitado e que o cursor fique no campo login.
Por favor perdoe minha ignorância mas preciso desta ajuda.
Verificar login com Ajax e Jquery Tava precisando de limpar uma lista de emails, e achei o site http://www.validadordeemails.com.br usei e limpei minhas listas de e-mail, realmente é muito bom, tem uns filtros avançados legais… Pra quem quiser retirar e-mails inválidos, uso e indico para meus amigos o site http://www.validadordeemails.com.br muito bom mesmo galera 🙂