Pixel Fórum
Bem vindo ao Pixel Fórum. Se registre-se.
Buscar
 
 

Resultados por:
 


Rechercher Busca avançada

Conectar-se

Esqueci minha senha

Últimos assuntos
» [Tutorial] Sing Animada
Ter Jan 08, 2013 5:32 pm por Dener

» [Tutorial] Efeito C4D
Ter Jan 08, 2013 5:29 pm por Dener

» [Abertura] - Pixel !
Ter Jan 08, 2013 4:56 pm por Dener

» Quebrando as Regras
Ter Jan 08, 2013 4:07 pm por Dener

» [Servidor] Mu - Walkman
Ter Jan 08, 2013 3:57 pm por Dener

» [Distração] O que gosta de fazer
Ter Jan 08, 2013 3:19 pm por VictorV.

» [Servidor] DDtank TB
Ter Jan 08, 2013 2:27 pm por Dener

» Fun.: We Are Young ft. Janelle Monáe
Ter Jan 08, 2013 2:25 pm por Dener

» Validação Inline De Formulário
Ter Jan 08, 2013 10:48 am por 

Top dos mais postadores
VictorV.
 
Dener
 
Kreitos
 
,Burn
 

Os membros mais ativos da semana

Os membros mais ativos do mês


Validação Inline De Formulário

Ir em baixo

Validação Inline De Formulário

Mensagem por  em Ter Jan 08, 2013 10:48 am

Já é uma prática comum, e bem-vinda, validar os dados preenchidos no formulário ainda do lado do cliente, quando este clica em “enviar”. Evita desperdiçar o tempo do usuário e o abandono do processo por frustração.

Para formulários mais longos ou complexos existe uma solução ainda melhor. Validar as informações quando o visitante preenche o campo e pula para o próximo. A validação inline. Aí sim existe interatividade, o que aumenta a taxa de sucesso.

Neste tutorial você vai aprender como apresentar as mensagens em caso de sucesso e erro. Não vamos nos ater aos pormenores da validação que variam muito dependendo da direção e propósito do formulário.

A Concepção Da Validação Inline

Existem inúmeras formas de mostrar um alerta no formulário. A mais usada apresenta a mensagem do lado direito do campo. A mais interessante desliza a mensagem sobre o campo. É esta que utilizaremos.

O evento disparador será a perda de foco do campo. Quando o usuário passa para o próximo campo. Sendo que é feita mais uma verificação quando o botão “enviar” for clicado.

A solução mostrada aqui não exige marcação extra no código HTML. Tudo será feito dinamicamente com o jQuery. Isso oferece a possibilidade de que você implante esta validação em formulários já existentes.

Veja a aparência do efeito.



HTML Do Formulário

O código é o de um formulário comum.

Código:
<h1>Formulário de Cadastro</h1>

    <form action="#" method="post" id="form">
        <fieldset>
            <label for="nome">Nome:</label>
            <input type="text" name="nome" size="35" title="Digite o nome" id="nome"/>
          <label for="email">E-mail:</label>
            <input type="text" name="email" size="35" title="Digite o e-mail" id="email"/>
          <label for="usuario">Usuário:</label>
            <input type="text" name="usuario" size="35" title="Digite o usuário" id="usuario" />           
          <label for="senha">Senha:</label>
            <input type="text" name="senha" size="35" title="Digite a senha" id="senha" />           
          <label for="rep_senha">Repita a senha:</label>
            <input type="text" name="rep_senha" size="35" title="Digite a senha novamente" id="rep_senha"/>           
            <input type="submit" name="enviar" value="Enviar" />
        </fieldset>
    </form>

Se for preciso mostrar a mensagem para o usuário, o código muda um pouco e uma div engloba o campo, gerando o seguinte código:

Código:
<label for="nome">Nome:</label>
<div class="conteiner">
  <input id="nome" class="borda" type="text" title="Digite o nome" size="35" name="nome" id="nome" style="margin-right:10px;"/>
  <div class="alerta">Digite o nome</div>
</div>

A div “conteiner” é inserida para fins de posicionamento da mensagem de alerta, que tem o texto copiado do atributo title do campo. Se você possui o plug-in Firebug ou similar, poderá ver este código sendo gerado quando o campo perder o foco.

A Formatação

Para o funcionamento do efeito, basta estilizar três classes.

Código:
.borda{border-color:#F60;}

.conteiner{
position:relative;
float:left;}

.alerta{
width:auto;
height:auto;
position:absolute;
right:-30px;
top:-15px;
padding:5px;
background:#F60;
color:#fff;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;}

Os campos do formulário possuem uma borda cinza. Se a mensagem é mostrada, esta borda fica alaranjada para chamar a atenção. Esta mudança de cor ocorre com a adição da classe “borda”.

A “conteiner“, como dito anteriormente, serve apenas como referência de posicionamento para o alerta, que sendo posicionado absolutamente, precisa de um elemento relativo como base.

A estilização do alerta oferece diversas possibilidades de formato. Neste caso nos atemos ao básico. Largura e altura ajustam-se ao conteúdo. Fica posicionado no canto superior direito do campo com o fundo alaranjado e texto branco. Os cantos são levemente arredondados para tornar o visual menos anguloso.

Mostrando O Alerta

Partimos agora para a parte pesada do código. Lembre de importar o jQuery 1.4 e criar um arquivo somente para o javascript e importá-lo após a biblioteca.

O código inicia quando um campo do tipo texto perde o foco.

Código:
$(function(){
  $('input[type=text]').blur(function(){
    var valor = $(this).val().trim();
    if (valor=='' && $(this).closest('div').attr('class')!='conteiner')
    {
    var title = $(this).attr(‘title’);
    $(this).addClass('borda').wrap('<div class="conteiner">');
    $(this).after('<div class="alerta">' + title + '</div>').animate({marginRight:"10px"},500); })
})
})

A variável “valor” recebe o conteúdo do campo que perdeu o foco. A referência para o campo que perdeu o foco é o $(this).

O espaço é considerado conteúdo o que abre uma brecha para que o formulário seja submetido sem dados. Para retirar o espaço no início e final dos valores basta o trim().

Código:
var valor = $(this).val().trim();

O problema é que o Internet Explorer não entende este método e retorna erro. Para ele temos uma função.

Código:
function ltrim(str) { return str.replace(/^\s+/,"");}

Abaixo é iniciada uma verificação para saber se é preciso mostrar a mensagem. Se a variável “valor”, que recebeu o conteúdo do campo, estiver vazia e a div acima do campo na árvore do documento não tiver a classe “conteiner“, roda o código que mostra o alerta.

Vamos olhar melhor para esta condição. O closest() é um seletor que procura o antepassado do elemento atual. Quando o alerta é mostrado, o campo é englobado por uma div com a classe “conteiner” que torna-se então, antepassada do campo atual. E se ela já existir, a mensagem esta sendo mostrada, sendo desnecessário mostrar outra.

Se a verificação retorna false, é preciso mostrar o alerta:

° É criada uma variável que recebe o texto do atributo title do campo;

° Ao campo atual é adicionada a classe “borda”, que torna a borda do campo alaranjada;

° Aproveitando o encadeamento, o campo é englobado (wrap) pela div “conteiner“.

Nesta altura, o HTML gerado é:

Código:
<div class="conteiner">
  <input id="nome" class="borda" type="text" title="Digite o nome" size="35" name="nome" id="nome/>
</div>

Depois do campo, é adicionada outra div com texto da variável “title”, surgindo e deslizando 10 pixels para a direita.

Retirando O Alerta

O alerta só precisa estar visível se o campo que perdeu o foco estiver vazio. Se ele for preenchido o alerta precisa desaparecer.

Código:
if(valor!='' && $(this).closest('div').attr('class')=='conteiner'){
$(this).removeClass('borda').siblings().remove()
  $(this).unwrap('.conteiner'); 
}

Se o campo não estiver vazio, mas ainda estiver sendo englobado pela div “container”, precisamos retirar o alerta.

Sendo assim é removida a classe que adiciona borda alaranjada. Em seguida é feita uma busca pelos irmãos deste campo, isto é, os elementos que tem o mesmo ancestral que este campo. Como é de se esperar vai ser encontrada a div “legenda”. Ela então é removida. Por fim, a div “conteiner” que engloba(wrap) o campo, é removida(unwrap).

O código completo para mostrar e remover o alerta fica:

Código:
$('input[type=text]').blur(function(){
  var valor = $(this).val().trim();
  if (valor=='' && $(this).closest('div').attr('class')!='conteiner')
  {
    alerta($(this), $(this).attr('title'));
  } else if(valor!='' && $(this).closest('div').attr('class')=='conteiner'){
    $(this).removeClass('borda').siblings().remove()
    $(this).unwrap('.conteiner'); 
  }
})

A Primeira Cerificação


Vamos verificar se a confirmação da senha é igual a senha. Isso ainda dentro do evento blur().

Código:
if ($(this).attr('name')=='rep_senha' && $(this).val()!=$('input[name=senha]').val())
{
  $(this).addClass('borda').wrap('<div class="conteiner">');
  $(this).after('<div class="alerta"><span>A confirmação da senha não confere.</span></div>').animate({marginRight:"10px"},500);}

Se o campo que perdeu o foco tiver “rep_senha” como valor do atributo name, e o valor deste campo não confere com o do campo nomeado “senha”, é preciso mostrar um alerta.

O código que mostra o alerta é o mesmo mostrado acima.

Uma Função

A parte do blur() esta completa com esta verificação e podemos partir para a parte em que o usuário clica em enviar. Mas espere um pouco. Você notou que o código para mostrar o alerta já foi escrito duas vezes? E mais adiante será utilizado novamente.

Para evitar a duplicação desnecessária do código e tornar o script mais customizável, vamos criar uma pequena função. Ela será chamada “alerta” e receberá dois parâmetros: o campo para o qual o alerta será mostrado e a mensagem.

Código:
function alerta(campo, msg){
  campo.addClass('borda').wrap('<div class="conteiner">');
  campo.after('<div class="alerta">' + msg + '</div>').animate({marginRight:"10px"},500);
  }

O código que insere o alerta não muda muito. Apenas sai o $(this) e no lugar fica o “campo”. E a div da legenda apresenta o texto configurado no parâmetro “msg”.

A chamada para a função é muito simples:

Código:
alerta($(this), $(this).attr('title'));

A partir de agora, qualquer validação que você fizer precisa apenas da linha acima para apresentar a mensagem.

Com este melhoramento, o código completo do blur() fica:

Código:
$('input[type=text]').blur(function(){
  var valor = $(this).val().trim();
  if (valor=='' && $(this).closest('div').attr('class')!='conteiner')
  {
    alerta($(this), $(this).attr('title'));
  } else if(valor!='' && $(this).closest('div').attr('class')=='conteiner'){
    $(this).removeClass('borda').siblings().remove()
    $(this).unwrap('.conteiner'); 
  }
 
  if ($(this).attr('name')=='rep_senha' && $(this).val()!=$('input[name=senha]').val())
    {
    alerta($(this), 'A confirmação da senha não confere.');
    }
  })

Ao Submeter O Formulário

Caso o usuário nem mesmo passe pelo campo e já clica no botão para enviar, precisamos mesmo assim avisar que existem campos incompletos.

Código:
$('#form').submit(function(event){
  $('input[type=text]').each(function(){
    var campo1 = $(this).val();
    if (campo1 =='' && $(this).closest('div').attr('class')!='conteiner')
    {
      alerta($(this), $(this).attr('title'));
      event.preventDefault();
    }
    if ($(this).closest('div').attr('class')=='conteiner')
    {
      event.preventDefault();
    }
  })
})

Ao submeter o formulário com id “form” é executada uma rotina que passa por cada um (each) dos campos do tipo texto.Uma variável recebe o valor do campo. É feita uma verificação. Se esta variável esta vazia e englobando o campo não existe nenhuma div com a classe “conteiner”, é executada a função que mostra o alerta. A linha seguinte previne que o formulário seja submetido.

Uma segunda verificação é feita procurando por alertas ainda sendo mostrados para evitar que o formulário seja submetido enquanto algum dos campos ainda não tenha sido preenchido.

Conclusão

As verificações mostradas no tutorial são bastante básicas e podem ser modificadas para os mais diversos propósitos. O importante é que agora você sabe como mostrar dicas e avisos ao usuário de forma elegante e não obstrutiva garantindo uma taxa de sucesso muito maior para seus formulários.

Veja o código completo:

Código:
function alerta(campo, msg){
    campo.addClass('borda').wrap('<div class="conteiner">');
    campo.after('<div class="alerta">' + msg + '</div>').animate({marginRight:"10px"},500);
  }

$(function(){
  $('input[type=text]').blur(function(){
    var valor = $(this).val().trim();
    if (valor=='' && $(this).closest('div').attr('class')!='conteiner')
    {
      alerta($(this), $(this).attr('title'));
    } else if(valor!='' && $(this).closest('div').attr('class')=='conteiner'){
      $(this).removeClass('borda').siblings().remove()
      $(this).unwrap('.conteiner'); 
    }
   
    if ($(this).attr('name')=='rep_senha' && $(this).val()!=$('input[name=senha]').val())
    {
      alerta($(this), 'A confirmação da senha não confere.');
    }
  })
 
  $('#form').submit(function(event){
    $('input[type=text]').each(function(){
      var campo1 = $(this).val();
      if (campo1 =='' && $(this).closest('div').attr('class')!='conteiner')
      {
        alerta($(this), $(this).attr('title'));
        event.preventDefault();
      }
      if ($(this).closest('div').attr('class')=='conteiner')
      {
        event.preventDefault();
      }
    })
  })
})

Fonte : WebMaster


Pontos Pontos : 0
Data de inscrição Data de inscrição : 01/01/1970

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Voltar ao Topo

- Tópicos similares

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum