w3FormValidation - Add-on para a Mtzlib
November 21st, 2006. Published under DOM, add-on, javascript, mtzlib. 13 Comments.
Finalizei o segundo add-on para a Mtzlib e ao mesmo tempo uma página dedicada a ele. O w3FormValidation é um add-on que vai simplificar seu trabalho ao validar formulários, tornando essa tarefa mais simples e eficiente.
Esse add-on para validação de formulário tem algumas vantagens interessantes de serem destacadas, vejamos:
Ele cria um “box” em HTML - com tag div - para simular o alert box do JavaScript. Com isso você poderá estilizá-lo e deixá-lo de acordo com a identidade visual do seu projeto.
Além do mais, mesmo que o alerta - criado pelo w3FormValidation - esteja na tela será possível prosseguir com o cadastro, coisa que não aconteçe quando um alert box do JavaScript é exibido.
Outra coisa bacana, é que você poderá por exemplo, manter todas suas regras de validação em único arquivo JS e editá-lo como e quando precisar, sem precisar mexer no HTML da sua página. Observe um exemplo:
var camposVal = [];
camposVal.push('req,campo_nome,Oops! Informe o seu nome aí.');
camposVal.push('email,campo_email,Oops! Informe um e-mail válido.');
camposVal.push('url,campo_url,Oops! Informe uma URL válida.');
camposVal.push('igual,senha1,senha2,Oops! As senhas informadas não conferem.');
ou seja, você pode criar várias regras como a demonstrada acima, e manter todas elas em um único arquivo. A seqüência da regra é a seguinte:
‘tipo-de-validação,id-do-campo,mensagem-a-ser-exibida.’
Até o momento, o w3FormValidation suporta quatro tipos de validação, sendo eles:
- req = requerido (o campo informado precisa ser preenchido);
- email = email válido (o campo informado precisa conter uma estrutura de e-mail válida);
- url = url válida (o campo informado precisa conter uma estrutura de URL válida);
- igual = os dois campos informados precisarão conter o mesmo valor - serem iguais.
Irei desenvolver outros tipos de validação, como: data, cpf, cnpj, números inteiros, entre outros. Gostaria muito da sua sugestão combinado? Ficarei no aguardo, até mais.
13 Comments
leandro on November 21st, 2006
Olá Pedro,
O tal push é bem simples, vejamos: ele é um método utilizado para adicionar um ou mais elementos a um array. Neste caso, estamos utilizando o push para adicionar uma nova regra de validação que será interpretada pelo w3FormValidation.
Um abraço.
Helder Lourenço on November 23rd, 2006
viva, mt bom essa funsão, vai facilitar mt a vida de mt gente !! so n me agrada uma coisa.. 1 delas é imagina que temos o nosso form no fundo da pagina. ao fazer a validaçao os erros sao mostrados no topo da pagina, e passamos do fundo para o topo, dá um pulo que n me agrada.. e a outra é deveria aparecer uma malha a atapar o contiudo do site, como acontesse nessas cenas de galerias.. n sei se me explico bem…
mas tá mt mt bom mesmo.. parabens.. vou ser cliente e usar 
leandro on November 23rd, 2006
Viva Helder,
Bacana lhe ver por aqui cara.
Esta questão do formulário está em baixo e a mensagem ser exibida no topo realmente é um desconforto e já estou trabalhando para corrigir isto. Fazerei com que a mensagem seja exibida no mesmo local em que a página se encontra.
Como ainda não desenvolvi este recurso, configurei para a página ir para cima, senão, o usuário não veria a mensagem.
Quanto a “malha” que você citou posso criar talvez como um opcional, uma vez que com ela você trava o conteúdo que está em baixo, e sem ela o usuário pode continuar a preencher o formulário vendo a mensagem de erro.
Mas, valeu pelos comentários, eles são muito importantes.
Um forte abraço.
Guilherme on March 22nd, 2007
Parabéns, muito bom o w3formValidation.
Eu conheço muito pouco de JS. Tipo, quero que se o formulário estiver preenchido certinho, ele passe para uma outra página, caso contrário, apareça a msg de erro e o usuario preencha o formulario de novo.
Mas não sei como fazer. Tentei algumas coisas e nda.
Se poder me ajudar agradeço.
Parabéns de novo. Flw.
leandro on March 22nd, 2007
Olá Guilherme,
Consulte os seguintes links:
http://leandro.w3invent.com.br/addons/w3FormValidation/
http://leandro.w3invent.com.br/labs/forum/
http://www.imasters.com.br/artigo/5136/webstandards/valide_seus_formularios_web_com_o_w3formvalidation/
Guilherme on March 23rd, 2007
Não curtido o fórum.
Valeu, dúvida tirada.
Funcionando 100%.
samira-mp3 on October 13th, 2007
Good site!
The biography and music Samira!!
crlos on April 28th, 2008
nao funciona no opera , alguem sabe como acertar?
parzufim.com on July 9th, 2008
viagra cialis levitra clomid buy viagra onli generic viagra http://www.parzufim.com cipro gay viagra buy viagra online cheap viagra
free viagra
herbal viagra
propecia xenical viagra side effects buy viagra zithromax lasix female viagra cream cheapest cialis http://www.parzufim.com
name on July 19th, 2008
Really nice=)but look this:,
umfsygoq fdrzobqju on July 24th, 2008
gzsvqobfl pkgifab owagtblmp wuimvle whbevdc wkclrvo vnhftmzkd
Pedro on November 21st, 2006
Cara, muito bom esse add-on aí, gostei. Gostei da idéia também de manter as regras de validação somente em um único arquivo e editar somente elas quando necessário.
Mas, explique uma coisa que não entendi: para que que serve esse push aí? Valeus