Valide seus formulários web com o w3FormValidation
Leandro Vieira (e-mail) trabalha com desenvolvimento para web desde 2002, é Diretor da Plugsites.net e Administrador do projeto DWMX.
Dedicarei este artigo para falar sobre um assunto que todo desenvolvedor web lida no seu dia-a-dia: a validação de formulários web. Só que mais do que falar a respeito do assunto, vou lhes apresentar uma forma simples, rápida e prática de validação de formulários.
Apresento-lhe o w3FormValidation que é uma forma simples, rápida e prática para validar formulários web. Sou o desenvolvedor deste recurso, então, poderei passar bons detalhes a respeito dele para você.
Obs.: Você não precisará alterar uma linha sequer dos códigos HTML do seu formulário. Uma vez que o w3FormValidation utiliza-se de javascript não-obstrutivo.
Sendo assim, vamos levar em consideração que você já tenha uma página com um formulário. Veja o exemplo.
Iniciaremos, incluindo o seguinte dentro da tag <head> da sua página, observe:
Ou seja, a primeira linha refere-se sobre a inclusão da Mtzlib - saiba um pouco mais sobre ela - a segunda é a inclusão do w3FormValidation e a terceria são declarações CSS para estilizar o box da mensagem gerado pelo w3FormValidation.
Faça o download dos arquivos:
01. Mtzlib
02. w3FormValidation
03. w3FormValidationStyle
Bom, feito isto, vamos criar as regras de validação desejada para os campos a serem validados. Vide o exemplo na imagem abaixo:
Vamos a compreensão:
. Na linha 15, criamos uma varíavel chamada camposVal e definimos o seu valor como []. Que é a mesma coisa que new Array.
. Da linha 16 até a 20, criamos cinco regras de validação compreendidas pelo w3FormValidation (explicarei todas elas).
. Essas regras são informadas da seguinte maneira: nomeDoArrayQueCriamosAnteriormente.push('tipo-de-validação,id-do-campo,mensagem-a-ser-exibida');
Nota: para quem não conheçe o método push, vou explicar: ele é utilizado para adicionar um elemento ou mais a um array.
Até o momento, o w3FormValidation suporta quatro tipos de validação: req, email, url e igual. Onde:
01. req (é igual a requerido) é utilizado para não deixar o campo ser enviado em branco (vazio);
02. email é utilizado para validar uma estrutura de e-mail válida;
03. url é utilizado para validar uma estrutura de URL válida;
04. igual é utilizado para comparar o valor de dois campos.
Veja a documentação sobre os tipos de validação.
Bom, basicamente é isto. Mas como falei anteriormente que utilizaremos javascript não-obstrutivo e que você não precisaria alterar uma linha sequer do HTML do seu formulário, não poderemos então (e não devemos também) utilizar eventos nas tags HTML como: onsubmit ou onclick e por aí vai. Tá, mas como farei então? Da forma como deve ser. Assim:
Vamos compreender por partes. Observe a linha 35, nela estamos dizendo que no evento load do window será chamada a função onLoad, ou seja, quando a página carregar por completo, a função onLoad será chamada. E o que essa função faz? Vejamos:
01. Na linha 23 ela diz que quando o botão de enviar do formulário - btnSubmit é o valor do atributo ID concedido ao referido botão - for clicado, será executda uma função;
02. Na linha 24 criamos uma variável chamada valida e nela estamos instanciando o w3FormValidation passando a ele dois parâmetros: as regras de validação que desejamos que ele execute e o título que será exibido no box da mensagem.
03. Na linha 25 criamos a variável resultado e nela chamamos o método start() do w3FormValidation.. Ao chamar este método, o w3FormValidation irá analisar as regras de validação que você passou para ele e os campos do formulário para ver se eles estão condicentes com as regras. Se todos os campos estiverem válidos, o w3FormValidation retorna true, caso contrário false. Então, a variável resultado terá o valor true ou false.
04. Na linha 26 estamos verificando se a varável resultado tem o valor true, e, se tiver, exibimos um alerta (utilizei aqui para exemplificar este artigo, mas desconsidere esse alerta) e retornaremos true, desta forma possibilitando que o formulário seja enviado.
05. Na linha 30 temos um return false que é utilizado para travar o formulário, ou seja, impedir que ele seja enviado. Pois os campos não estão perfeitamente válidos como desejamos.
Um detalhe importante: as regras de validação e a função que expliquei anteriormente podem ficar em um arquivo .js ao invés de estarem junto aos códigos HTML.
Dica: se você tem inúmeros formulários, concentre todas as regras de validação em um único arquivo. Facilitará sua vida e tudo ficará mais organizado e a manunteção será rápida e eficiente.
Para finalizar, gostaria de apresentar a todos vocês meu blog pessoal: Leandro Vieira Pinho´s Blog, onde falo sobre o desenvolvimento web em geral. E dizer que toda e qualquer sugestão a respeito do w3FormValidation será importante para que ele melhore a cada dia.
Um abraço a todos e até amanhã.
