Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal!
Estou utilizando o jQuery Validation para fazer a validação de campos de usuário e senha de um formulário e, através do jQuery qTip plugin exibir tooltips com os erros dos respectivos campos (campo vazio, usuário inexistente e senha inválida).
Consegui exibir o erro no tooltip caso o campo usuário seja submetido vazio.
Porém, no caso de o usuário ser inexistente, ao submeter o formulário, o campo é limpo, e o tooltip não aparece. Se clico novamente no botão submit, ai sim o tooltip com o erro de usuário inválido aparece. [?]
Minha dúvida: Como fazer com que cada erro específico apareça em seu tooltip?
Eis meu código:
<?php include "funcoes.php"; // conexão BD ?>
<!DOCTYPE html>
<head>
<title>Validação</title>
<meta charset="UTF-8" />
<link rel="stylesheet" href="" />
</head>
<body>
<div id="geral">
<header>
<h1>Validação</h1>
</header>
<form id="formulario" method="post">
<label>Usuário</label>
<input name="usuario" type="text" id="usuario" value="<?php @$_REQUEST['usuario']; ?>" title="" />
<label>Senha</label>
<input name="senha" type="text" id="senha" value="" title="" />
<input type="submit" name="entrar" value="Entrar" />
</form>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.qTip.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var usuario = $('#formulario');
usuario.validate({
errorClass: "req",
errorLabelContainer: $(".req"),
onkeyup: false,
rules: {
usuario:
{
required: true
}
},
messages:
{
usuario:
{
required:
"<?php
$usuario = @$_POST['usuario'];
if(empty($usuario))
{
echo "Usuário não pode estar vazio";
}
$query = mysql_query("SELECT * FROM usuarios WHERE usuario='$usuario'");
$verificar = @mysql_num_rows($query);
if (!empty($usuario) && $verificar != 1)
{
echo "Este usuário não existe";
}
?>"
}
},
errorPlacement: function(error, element)
{
$(element).filter('#usuario').qtip({
overwrite: false,
content: error,
position:
{
corner:
{
target: 'topMiddle',
tooltip: 'bottomMiddle'
}
},
show:
{
event: false,
ready: true,
when:
{
event: 'focus',
event:false
}
},
hide:
{
when:
{
event: 'keypress'
}
},
style:
{
background: '#7c1623',
border:
{
color: '#7c1623',
radius: 5,
width: 5
},
color: '#fff',
name: 'red',
padding: 5,
tip: true
}
});
}
});
});
</script>
</body>
</html>Peço desculpas se inclui essa thread no fórum errado... Acontece que como minha questão engloba jQuery e PHP, não soube o melhor lugar para inseri-lo.
Obrigado!
Carregando comentários...