13 de fev de 2014

Validando formulário de contato com jQuery

Aqui no meu blog, já postei alguns exemplos de formulários de contato, você pode usar qualquer um deles para testar este exercício, ou se desejar, pode criar seu próprio formulário.

Caso deseje, seguem os links dos posts criados:
Abaixo, separarei os códigos HTML, CSS e Javascript. Neste exemplo, estamos usando tudo na mesma página HTML pois este é um exemplo apenas para fins de estudo, mas se desejar, pode deixar o CSS e o Javascript em documentos separados, o que é até melhor.

1 - Primeiramente o HTML, vejam que não existe segredo nenhum na construção do formulário, notem apenas que abaixo dos campos de nome, email e mensagem, existem mensagens de erro, que deverão aparecer somente se o campo não for preenchido corretamente.

Se abrir este exemplo em seu navegador, notará que as mensagens de erro aparecem logo que o formulário é exibido, e isso não faz sentido... vamos arrumar isso agora mesmo.

Nome:
O campo NOME é obrigatório

E-mail:
O campo E-MAIL é obrigatório

O E-MAIL que você digitou não é válido

Telefone:
Mensagem:
Por favor, digite uma mensagem

A Mensagem que você digitou é muito curta


2 - Agora o CSS, também não existe segredo nenhum, apenas os campos simplesmente estilizados com uma borda e um padding. O grande "pulo do gato" está em esconder com um display:none, as divs com id #erroNome, #erroMail, #erroMail2, #erroMsg, #erroMsg2, pois estas são as divs responsáveis por exibir as mensagens de erro.

Abra este HTML em seu navegador, e note que agora faz mais sentido, as mensagens de erro não aparecem logo que o formulário é aberto.

p{
 font-family:sans-serif;
 font-size:14px;
}

p img{
 vertical-align:text-top;
}

input, textarea{
 border:solid 1px #ccc;
 padding:5px;
}

/* abaixo estão os estilos das mensagens de erro */

.erroValid{
 padding:5px;
 background:#FFC;
 color:#900;
 border-radius:3px;
 margin:5px 0;
}

#erroNome, #erroMail, #erroMail2, #erroMsg, #erroMsg2{
 display:none; /* Aqui eu escondo todas as mensagens de erro */
}

3 - Agora para fazer tudo funcionar, vamos colocar o Javascript, o código está bem comentado para melhor entendimento.

Ele é responsável por verificar se os campos obrigatórios (no caso nome, email e mensagem) estão preenchidos corretamente, e o jQuery fica responsável por exibir de uma maneira mais "elegante" as mensagens de erro, com um fadeIn e fadeOut.

function validar(formulario){
 if(formulario.nome.value ==''){
  $('#erroNome').fadeIn('slow'); //se o campo nome estiver vazio, o jquery exibe a div #erroNome que até então estava escondida pelo CSS
  return false;
 }
 if(formulario.mail.value ==''){
  $('#erroMail').fadeIn('slow'); //se o campo mail estiver vazio, o jquery exibe a div #erroMail que até então estava escondida pelo CSS
  return false;
 }
 if(formulario.mail.value.indexOf(('@' && '.'),0)== -1){
    $('#erroMail2').fadeIn('slow'); //se o campo mail não conter um ponto ou arroba, ele exibe a div #erroMail2 que até então estava escondida pelo CSS
    return false;
 }
 if(formulario.mensagem.value ==''){
  $('#erroMsg').fadeIn('slow'); //se o campo mensagem estiver vazio, o jquery exibe a div #erroMsg que até então estava escondida pelo CSS
  return false;
 }
 if(formulario.mensagem.value.length < 10){
  $('#erroMsg2').fadeIn('slow'); //se o campo mensagem for preenchido com menos de 10 caracteres, o jquery exibe a div #erroMsg2 que até então estava escondida pelo CSS
  return false;
 }
 return true;
};

function apagarErro(){
 $('.erroValid').fadeOut('slow'); //quando um campo é selecionado, ele dispara esta função, que apaga as mensagens de erro exibidas
}

Para visualizar este exemplo, clique aqui.

Sugestões de melhoria? Dúvidas? Sintam-se a vontade para comentar.

Obs, o exemplo acima serve apenas como consulta, se desejar se basear nele, sugiro que faça as alterações necessárias para que funcione corretamente para suas necessidades, não autorizo a copia total do conteúdo para uso comercial, caso isso seja feito, não me responsabilizo por algum problema técnico.



Nenhum comentário:

Postar um comentário