
Em outras postagens mostrei como validar os campos em PHP (o que é bastante seguro), porém e se eu quiser colocar uma dupla validação e avisar antes do envio para o usuário quais são os campos obrigatórios e que devem ser preenchidos corretamente?
É nesse ponto que entrar o jquery.
Nessa postagem vou mostrar como fazer uma simples validação dos campos antes dos envios.
Vamos lá, primeiro crio um arquivo HTML normal com um formulário de cadastro:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Validação de campos com Jquery</title> </head> <body> <form id="cadastro" method="post" action="#"> <ul> <li> <label for="nome">Nome</label> <input type="text" id="nome" name="nome" /> </li> <li> <label for="email">Email</label> <input type="text" id="email" name="email" /> </li> <li> <label for="sexo">Sexo</label> Feminino <input type="radio" name="sexo" value="f" /> Masculino <input type="radio" name="sexo" value="m" /> </li> <li> <label for="endereco">Endereço</label> <input type="text" id="endereco" name="endereco" /> </li> <li> <label for="numero">Numero</label> <input type="text" id="numero" name="numero" /> </li> <li> <label for="cidade">Cidade</label> <input type="text" id="cidade" name="cidade" /> </li> <li> <label for="estado">Estado</label> <select name="estado"> <option value="">Selecione o Estado</option> <option value="ac">Acre</option> <option value="al">Alagoas</option> <option value="ap">Amapá</option> <option value="am">Amazonas</option> <option value="ba">Bahia</option> <option value="ce">Ceará</option> <option value="df">Distrito Federal</option> <option value="es">Espirito Santo</option> <option value="go">Goiás</option> <option value="ma">Maranhão</option> <option value="ms">Mato Grosso do Sul</option> <option value="mt">Mato Grosso</option> <option value="mg">Minas Gerais</option> <option value="pa">Pará</option> <option value="pb">Paraíba</option> <option value="pr">Paraná</option> <option value="pe">Pernambuco</option> <option value="pi">Piauí</option> <option value="rj">Rio de Janeiro</option> <option value="rn">Rio Grande do Norte</option> <option value="rs">Rio Grande do Sul</option> <option value="ro">Rondônia</option> <option value="rr">Roraima</option> <option value="sc">Santa Catarina</option> <option value="sp">São Paulo</option> <option value="se">Sergipe</option> <option value="to">Tocantins</option> </select> </li> <li> <input type="submit" id="enviar" value="Gravar" /> </li> </ul> </form><!-- #cadastro --> </body> </html>
Para deixar com um visual melhor o formulário, eu irei adicionar esses estilos em CSS:
<style type="text/css"> body { font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif; } #cadastro { float: left; display: block; } #cadastro ul { list-style: none; } #cadastro li { display: block; margin-bottom: 10px; } #cadastro label { display: block; margin-bottom: 5px; } #cadastro input[type=text], #cadastro select { line-height: 30px; width: 250px; height: 30px; display: block; border: solid 1px #dcdcdc; background: #f4f4f4; } #cadastro input[type=submit] { width: 100px; height: 30px; display: block; float: left; cursor: pointer; background: #b7e8fa; text-transform: uppercase; border: solid 1px #79d4f6; } #cadastro input[type=submit]:hover { color: #FFF; background: #63b2cf; } </style>
Agora vamos às instruções de como aplicar o funcionamento da biblioteca validate.
O primeiro passo é incluir (carregar) o jquery que pode ser realizado de duas formas:
- Fazendo o download (recomendado) do arquivo através desse link e então fazer o upload do arquivo no servidor onde está hospedado o arquivo e então “chamar” o arquivo através da seguinte linha:
<script type="text/javascript" src="js/jquery.js"></script>
IMPORANTE: Essa linha deve estar antes do fechamento da tag </head> para que seja carregando junto com o cabeçalho da página.
- Utilizar o arquivo a partir de um link externo, no qual o arquivo já está hospedado, como pode exemplo, através do link:
<script src="//code.jquery.com/jquery-1.11.2.min.js"</script>
O segundo passo é quase igual ao primeiro, devemos fazer o download da biblioteca validate através do link: http://jqueryvalidation.org/files/jquery-validation-1.13.1.zip
Carrega-lo logo após o carregamento do Jquery:
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script>
Depois eu preciso indicar quais são os campos obrigatórios colocando neles uma classe desenvolvida na biblioteca, acompanhe na alteração abaixo:
<form id="cadastro" method="post" action="#"> <ul> <li> <label for="nome">Nome</label> <input class="required" type="text" id="nome" name="nome" /> </li> <li> <label for="email">Email</label> <input class="required email" type="text" id="email" name="email" /> </li> <li> <label for="sexo">Sexo</label> Feminino <input class="required" type="radio" name="sexo" value="f" /> Masculino <input class="required" type="radio" name="sexo" value="m" /> </li> <li> <label for="endereco">Endereço</label> <input class="required" type="text" id="endereco" name="endereco" /> </li> <li> <label for="numero">Numero</label> <input class="required" type="text" id="numero" name="numero" /> </li> <li> <label for="cidade">Cidade</label> <input class="required" type="text" id="cidade" name="cidade" /> </li> <li> <label for="estado">Estado</label> <select class="required" name="estado"> <option value="">Selecione o Estado</option> <option value="ac">Acre</option> <option value="al">Alagoas</option> <option value="ap">Amapá</option> <option value="am">Amazonas</option> <option value="ba">Bahia</option> <option value="ce">Ceará</option> <option value="df">Distrito Federal</option> <option value="es">Espirito Santo</option> <option value="go">Goiás</option> <option value="ma">Maranhão</option> <option value="ms">Mato Grosso do Sul</option> <option value="mt">Mato Grosso</option> <option value="mg">Minas Gerais</option> <option value="pa">Pará</option> <option value="pb">Paraíba</option> <option value="pr">Paraná</option> <option value="pe">Pernambuco</option> <option value="pi">Piauí</option> <option value="rj">Rio de Janeiro</option> <option value="rn">Rio Grande do Norte</option> <option value="rs">Rio Grande do Sul</option> <option value="ro">Rondônia</option> <option value="rr">Roraima</option> <option value="sc">Santa Catarina</option> <option value="sp">São Paulo</option> <option value="se">Sergipe</option> <option value="to">Tocantins</option> </select> </li> <li> <input type="submit" id="enviar" value="Gravar" /> </li> </ul> </form><!-- #cadastro -->
Veja que eu adicione nos campos a classe “required” e no caso do email eu também adicionei a classe “email” para que seja validado como um email verdadeiro.
Agora no fim da página, antes de fechar a tag </body>, irei adicionar o seguinte script:
<script type="text/javascript"> $("#cadastro").validate({ submitHandler: function(form) { form.submit(); } }); </script>
E pronto? Esse será o resultado ao tentar enviar o formulário sem o correto preenchimento dos campos:
Para melhorar a forma como deverá aparecer para o usuário final, vamos adicionar algumas configurações, primeiro no css:
#cadastro input[type=text].error, #cadastro select.error, #cadastro input[type=radio].error { border: solid 1px #900; } label.error { font-size: 12px; color: #900; }
E agora no script do validate para que a mensagem de erro seja exibida de forma mais coerente para o usuário entender:
<script type="text/javascript"> $("#cadastro").validate({ submitHandler: function(form) { /* SE TUDO ESTIVER OK, ENVIO O FORMULÁRIO */ form.submit(); }, messages : { /* ESPECIFICO ALTERAÇÃO SOMENTE PARA O EMAIL */ email: { required: 'Esse campo é obrigatório', email: 'Preencha com um email válido' } } }); /* ALTERO A FRASE DE TODOS OS CAMPOS */ $.validator.messages.required = 'Esse campo é obrigatório'; </script>
Agora sim, temos um resultado melhor:
NOTA: Essa validação não substitui de forma nenhuma uma validação utilizando uma linguagem de programação no lado servidor, apenas auxilia como aviso para o usuário final.
Se quiser os arquivos dessa postagem, pode fazer o download aqui: