Validador de formulários simples do Elcio

Este documento mostra como usar o Validador de formulários simples do Elcio. Sugestões de nomes para o validador são muito bem vindas. ;-)

Veja também exemplos do validador funcionando.

Conceitos básicos

Para usar este validador você precisa incluir na seção head de sua página chamadas para os arquivos jquery.js e form.js. A ordem é importante. O jquery.js deve vir antes do form.js.

A indicação do que deve ser validado e como deve ser indicada de maneira semântica usando classes no HTML. Para validar um formulário qualquer, inclua nele a classe vForm, sozinha ou em conjunto com outras classes. Isso permite a você ter mais de um formulário numa mesma página e indicar qual, ou quais, você deseja que este script valide.

Para indicar quais campos devem ser validados, você deve usar uma ou mais classes na tag label.

Validações possíveis

As rotinas de validação disponíveis, com seus respectivos nomes de classe são:

1. vObrigatorio: o campo precisa ser preenchido.
2. vNumero: o campo permite apenas números.
3. vEmail: Apenas e-mails válidos.
4. vCEP: Apenas numeros no formato de CEP, com hífen.
5. vCPF: Validação de número de CPF.
6. vConfirma: O valor do campo deve ser igual ao do campo cujo nome é igual ao desse mais o número 2. Por exemplo, senha e senha2.
7. vData: Apenas datas válidas.

Um campo pode ter mais de uma validação. Por exemplo, o campo pode ser vObrigatorio, vEmail e vConfirma ao mesmo tempo. Você pode usar essas classes também para formatação. Nos exemplos, mostramos a classe vObrigatorio em negrito, indicando ao usuário quais os campos obrigatórios.

Máscaras

Além das rotinas de validação, temos algumas máscaras que podem ser aplicadas aos campos:

1. vMaskNumero: apenas números
2. vMaskCPF: máscara de CPF
3. vMaskData: máscara de data
4. vMaskCEP: máscara de CEP

As máscaras podem ser aplicadas junto com os validadores.

Exibindo os erros

Quando o formulário é submetido, a função de validação é executada. Se ocorrerem erros de validação, eles são exibidos num alert javascript. É possível alterar este comportamento, exibindo os erros de outras maneiras. Para isso, consulte o manual do programador.

Além disso, cada label onde ocorreu um erro ganha a classe vErro. Assim, é fácil usar CSS para destacar os campos com erro. Por exemplo, para mostrar em vermelho os campos com erro, basta:

.vErro {
  color:red;
}

Elcio Ferreira, 2007