Leandro Vieira Pinho´s Blog

w3FormValidation 2.0 está disponível

November 26th, 2006. Published under DOM, add-on, javascript, mtzlib. 9 Comments.

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.