Hoje vou demonstrar como vocês podem criar uma validação de campos (inputs) usando jQuery e um plugin dele. Vamos verificar, por exemplo, se todos os campos foram preenchidos ou não.. ou se os seus valores estão ok.
Veja um exemplo do que será aprendido nessa aula.
Usarei como exemplo um formulário de contato que é o mais comum por aí. Vamos ao passo-a-passo:
Faça o download da última versão do jQuery no site: http://jquery.com/
Faça o download do plugin Validation no site: http://bassistance.de/jquery-plugins/jquery-plugin-validation/
Insira-os dentro do <head> do seu site, da seguinte forma:
1.<script language="JavaScript" src="jquery.js" type="text/javascript"></script>
2.<script language="JavaScript" src="jquery.validate.js" type="text/javascript"></script>Após isso, criamos um pequeno bloco de CSS para estilizar as mensagens de erro:
1.* { font-family: Verdana; font-size: 96%; }
2.label { display: block; margin-top: 10px; }
3.label.error { float: none; color: red; margin: 0 .5em 0 0; vertical-align: top; font-size: 10px }
4.p { clear: both; }
5..submit { margin-top: 1em; }
6.em { font-weight: bold; padding-right: 1em; vertical-align: top; }Ainda dentro do head, depois de inserir o jQuery e o estilo das mensagens de erro, precisaremos adicionar um bloco de JavaScript contendo instruções para a validação:
01.$(document).ready( function() {
02.$("#formularioContato").validate({
03.// Define as regras
04.rules:{
05.campoNome:{
06.// campoNome será obrigatório (required) e terá tamanho mínimo (minLength)
07.required: true, minlength: 2
08.},
09.campoEmail:{
10.// campoEmail será obrigatório (required) e precisará ser um e-mail válido (email)
11.required: true, email: true
12.},
13.campoMensagem:{
14.// campoMensagem será obrigatório (required) e terá tamanho mínimo (minLength)
15.required: true, minlength: 2
16.}
17.},
18.// Define as mensagens de erro para cada regra
19.messages:{
20.campoNome:{
21.required: "Digite o seu nome",
22.minLength: "O seu nome deve conter, no mínimo, 2 caracteres"
23.},
24.campoEmail:{
25.required: "Digite o seu e-mail para contato",
26.email: "Digite um e-mail válido"
27.},
28.campoMensagem:{
29.required: "Digite a sua mensagem",
30.minLength: "A sua mensagem deve conter, no mínimo, 2 caracteres"
31.}
32.}
33.});
34.});Por fim, inserimos o HTML do formulário na página:
01.<form id="formularioContato" method="post" action="">
02.<label>Nome</label>
03.<input name="campoNome" type="text" value="" />
04.
05.<label>E-mail</label>
06.<input name="campoEmail" type="text" value="" />
07.
08.<label>Mensagem</label>
09.<textarea name="campoMensagem"></textarea><br />
10.
11.<input type="submit" class="submit" value="Enviar" />
12.</form>Viram como é fácil? O arquivo final ficou dessa forma. Se você preferir pode copiar todo esse código JavaScript para um arquivo .js e incluí-lo no <head> do seu site da mesma forma que fizemos no começo da aula.
Coloquei alguns comentários na parte das instruções de validação para facilitar o entendimento.
Com isso você faz uma validação client-side que ajuda a evitar dados inválidos e campos vazios. Mas preciso lembrar que, por ser client-side, essa validação acontece apenas no computador do visitante e o mesmo pode desativar o JavaScript e a validação toda não irá funcionar. Então não se esqueça de fazer a mesma validação dentro do PHP quando receber os dados.
Veja o exemplo desta aula funcionando.
Mais exemplos de validações diferentes podem ser encontrados no site do plugin: http://jquery.bassistance.de/validate/demo/
Abraços e até a próxima! 🙂
De 0 a 10, o quanto você recomendaria este artigo para um amigo?