Validação Inline De Formulário

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.


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.


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.


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.


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.


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&ccedil;&atilde;o da senha n&atilde;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.


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.');
    }
  })

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.


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&ccedil;&atilde;o da senha n&atilde;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