[Resolvido] jQuery validation - Como não sumir com conteúdo do in

MBarros · Novembro 19, 2010

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!

MBarros · Novembro 20, 2010

O qTip tem por base buscar o texto através do title dos inputs.

Meu problema está focado no seguinte: a validação para campo em branco funciona. Mas quando vou verificar se determinado usuário inserido no input text existe, ao clicar no submit, o formulario é enviado e o campo fica em branco. Nada acontece. Se clico novamente no submit, ai sim o erro de usuário inválido surge. Não estou obtendo êxito em exibir a mensagem de usuário inexistente pois o formulário é enviado antes que o tooltip apareça. Como corrigir isso? Sinto que minha questão está focada em: Como não dar refresh ou enviar o conteúdo do formulário caso algo esteja errado?

<!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 method="post" action="index.php" id="formulario">
    <label>Usuário</label>
    <input name="usuario" type="text" id="usuario" title="<?php
  include 'funcoes.php';
  
  $usuario = @$_POST['usuario'];
  
  if (!$usuario)
  {
   echo "Não pode ficar em branco";
  }
  
  $query = mysql_query("SELECT usuario FROM usuarios WHERE usuario = '$usuario'");
  
  while($linha = mysql_fetch_assoc($query))
  {
    $usuario_bd = $linha['usuario'];
  }
  
  if ($usuario !== @$usuario_bd){
    echo "Usuário inexistente";
  }
?>" />
     
    <label>Senha</label>
    <input name="senha" type="text" id="senha" />
    
    <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 }
    },

    errorPlacement: function(error, element)
    {
      $(element).filter('#usuario').qtip({
        overwrite: false,
        content: error.html(),
        position: 
        {
          corner: 
          {
            target: 'topMiddle',
            tooltip: 'bottomMiddle'
          }
        },
                   
        show: 
        {
          when: { event: 'none' },
          ready: true
        },
                     
        hide: 
        {
          when: { event: 'keydown' }
        },
                     
        style: 
        {
          background: '#7c1623',
          border: 
          {
            color: '#7c1623',
            radius: 5,
            width: 1
          },
          color: '#fff',
          name: 'red',
          padding: 5,
          tip: true
        }
      });
    }
  });
});
</script>
</body>
</html>

MBarros · Novembro 20, 2010

Consegui!

Eis o código com a solução para aquilo que eu procurava (deixo aqui registrado caso alguém ache interessante utilizar tooltips para exibir erros de login)

ps: basta fazer a verificação se o usuário existe através do arquivo verifica.php

;)

Moderação: resolvidaço!!!

<script type="text/javascript">
  $(document).ready(function(){
    $("#formulario").validate({
      errorClass: "req",
      errorLabelContainer: $(".req"),
      onkeyup: true,
      rules: 
      {
        login: 
        {
          required: true,
          remote: 
          {
            url: "verifica.php",
            type: "post"
          }
        }
      },
      
      messages:
      {
        login:
        {
          required: 'Este campo é obrigatório',
          remote: 'Este login não existe'
        }
      },
      
          errorPlacement: function(error, element)
    {
      $(element).filter('#login').qtip({
        overwrite: false,
        content: error.html(),
        ignoreTitle: true,
        position: 
        {
          corner: 
          {
            target: 'topMiddle',
            tooltip: 'bottomMiddle'
          }
        },
                   
        show: 
        {
          when: { event: 'none' },
          ready: true
        },
                     
        hide: 
        {
          when: { event: 'keydown' }
        },
                     
        style: 
        {
          background: '#7c1623',
          border: 
          {
            color: '#7c1623',
            radius: 5,
            width: 1
          },
          color: '#fff',
          name: 'red',
          padding: 5,
          tip: true
        }
      });
    }
    });  
  }); 
</script>

Entrar

Arquivado

[Resolvido] jQuery validation - Como não sumir com conteúdo do in

Recommended Posts

MBarros 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

MBarros 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

MBarros 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante