o w3FormValidation 2.2 está recheado de novidades e irei contar todas elas para você

Disponibilizei o changeLog do w3FormValidation via RSS para lhe ajudar estar sempre antenado com os novos “releases”.

Nesta versão 2.2 houve uma padronização nos nomes dos tipos de validação; agora todos eles estarão em inglês.

Foi corrigido o bug no tipo de validação: url. O qual considerava uma estrutura de subdomínio inválida.

Agora o w3FormValidation oferece suporte a validação de radio buttons de forma simples e fácil, como deve ser.

Novos tipos de validação foram acrescentados e irei abordar um por um aqui no blog, aguarde. Enquanto isto, lhe informo quais foram os novos tipos de validação:

• digits
• length
• range
• if (condicional)

Consulte os tipos de validação do w3FormValidation.

O w3FormValidation 2.0 está a sua disposição. Acrescentei novos recursos a este sistema de validação e dedicarei este post para falar sobre eles. Vamos lá.

[UPDATE]o w3FormValidation trabalha com a Mtzlib 0.2.6 ou superior.[/UPDATE]

Primeiramente. Se você não sabe do que se trata o w3FormValidation vou lhe dizer: é uma forma simples, rápida, simples e não-obstrutiva para validação de formulários web.

Esta segunda versão mantém o mesmo engine de validação da primeira, o que significa dizer que a forma para informar as regras de validação dos campos é a mesma. Vide exemplo:

var camposVal = [];
camposVal.push('tipo-de-validação,id-do-campo,mensagem');
...

Agora você poderá customizar o título do box da mensagem, informando o texto desejado através de um parâmetro ao chamar o w3FormValidation. Observe:

var valida = new w3FormValidation(camposVal,'Texto que será utilizado no título');

Se o título não for informado, será utilizado o título padrão: Observações!

Outra customização é a possibilidade de dizer ao w3FormValidation qual será a distância entre o box da mensagem e o topo do viewport do browser. Por padrão a distância é zero, e você pode informar essa distância da seguinte maneira:

var valida = new w3FormValidation(camposVal,'Texto que será utilizado no título',100);

Ou seja, o box da mensagem terá 100px de distância entre o topo do viewport.

O w3FormValidation 2.0 utiliza um overlay sobre o body, deixando os demais elementos na página de forma translúcida e um foco exclusivo e total ao box da mensagem. Mas se você não quiser utilizar este recurso, você poderá desativá-lo assim:

var valida = new w3FormValidation(camposVal,'Texto que será utilizado no título',100,false);

Ou seja, informando false como valor para o quarto parâmetro.

Na versão 1.0 do w3FormValidation o box da mensagem sempre era exibido no topo do página, o que tornava a exibição chata e desconfortável caso o formulário estivesse no rodapé da página, por exemplo. Nesta segunda versão, é verificado a localização do usuário na página no momento em que ele envia o formulário, dessa forma é possível exibir o formulário exatamente no local em que o usuário e o formulário se encontram na página.

Outro recurso adicionado foi a possibilidade do box da mensagem acompanhar a rolagem da página feita pelo usuário. Mas se você não quiser utilizar este recurso, você também pode desativá-lo, da seguinte forma:

var valida = new w3FormValidation(camposVal,'Texto que será utilizado no título',100,false,false);

Como você percebeu, é só informar no quinto parâmetro o valor false que tal recurso não será utilizado.

Outro detalhe é importante, é que esta versão retira do campo a classe w3FieldError caso ele tenha passado no validação desejada. Nesta versão também foi incluído o w3FadingOpacity.

Os tipos de validação reconhecidos e suportados pelo w3FormValidation ainda são os mesmos. Novos tipos estão anotados e já estou planejamento o desenvolvimento, mas julguei estas modificações mais emergenciais e necessárias para este add-on.

Conto com seu comentário, sugestão e crítica para melhorar cada vez mais este sistema de validação.

Expliquei no post anterior – Overlay para o body com JavaScript – como criar um overlay para o body com JavaScript. Neste post, falarei sobre o mesmo assunto, ou melhor, explicarei a mesma coisa.

Mas agora, iremos reproduzir o mesmo efeito, mas utilizando a Mtzlib. Assim, você poderá comparar a função bodyOverlay que criamos anteriormente com esta agora. Observe:

function bodyOverlay() {
	var sizesPage = getPageSize();
	$append($new("div","id=bodyOverlay",''));
	$('bodyOverlay').style.height = arrayPageSize[1] + 'px';
}

Veja como a Mtzlib facilitou nossa vida e tornou todo o processo mais fácil.

Veremos agora, como adicionar o add-on w3FadingOpacity. Observe mais uma vez:

function bodyOverlay() {
	var sizesPage = getPageSize();
	$append($new("div","id=bodyOverlay",''));
	$('bodyOverlay').style.height = arrayPageSize[1] + 'px';
	var fadeOverlay = new w3FadingOpacity('bodyOverlay',0,80,0);
	fadeOverlay.start();
}

Para remover o overlay criado, você pode utilizar a seguinte função:

function removerOverlay() {
if ( $('bodyOverlay') ) {
$remove($('bodyOverlay'));
}
}

Um detalhe. Já que está utilizando o w3FadingOpacity você deverá fazer uma simples alteração nas CSS, observe:

opacity: 0;
filter:alpha(opacity=0);

Se você não leu o post anterior: Overlay para o body com JavaScript leia-o para você compreender este melhor. Uma vez que este tem a simples intenção de demonstrar como é mais simples trabalhar com JavaScript e DOM utilizando a Mtzlib.

[UPDATE] Veja um exemplo deste efeito [/UPDATE]

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:

1. req = requerido (o campo informado precisa ser preenchido);
2. email = email válido (o campo informado precisa conter uma estrutura de e-mail válida);
3. url = url válida (o campo informado precisa conter uma estrutura de URL válida);
4. 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.

O primeiro add-on para a Mtzlib está pronto e ganhou uma página própria. Nessa página temos todas as informações referente ao add-on e um tutorial explicando sua utilização. Acho que um tutorial nem precisaria, uma vez que é tão simples utilizar o w3FadingOpacity, veja só:

var efeito = new w3FadingOpacity('idDoObjeto',0,100,300,fazerAlgoDepois);
efeito.start();

Ou seja, instanciamos o add-on e informamos a ele cinco parâmetros: ID do objeto que receberá o efeito, opacidade inicial – 0 – e final – 100 – tempo de duração do efeito – 300 – e pedimos para ele chamar a função fazerAlgoDepois quando o efeito for concluído, somente. Esse último parâmetro é opcional.

Ficarei no aguardo do seu feedback, até lá.