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:
