vForms

1. O que é

vForm é um pequeno script não-obstrusivo, escrito sobre o framework jQuery, para validação de formulários do lado cliente.

Existem diversos validadores de formulários em Javascript, porém é dificil encontrar aquele que seja realmente útil em qualquer situação. Dos que já encontrei, sempre algum se destaca em determinada tarefa, mas falha em outras. Meu intuito então é unir, em um só validador, tudo que encontrei de melhor nos validadores que já utilizei.

Atualmente o vForm é capaz de:

• Criar com extrema facilmente qualquer máscara para formatar campos
• Adicionar facilmente novas funcões Javascript de validação
• Exibir mensagens de erro personalisadas para cada função de validação
• Sinalizar os campos que falharam durante a validação
• Não-obstrusivo. Controlado somente por atributos class

2. Como utilizar

1. Insira no head o caminho para os arquivos do jQuery e vForm.

   <script src="jQuery_vForms.js" type="text/javascript"></script>

2. Defina a classe vForm para os formulários que você deseja usar a validação.

   <form class="vforms"></form>

3. Defina nas tags label do seu formulário as classes referentes as máscaras e a validação de valores.
   OBS: O script trabalhará com o campo do label através do atributo for. Por tando, para que o vForm funcione, não deixe de colocar o atributo for em seus labels

<label for="input_telefone" class="vObrigatorio vMaskTelefone" />

4. Editando o arquivo do vForm você pode adicionar novas mascaras e funções de validação de valores.

3. Funcionalidades

vForm é capaz de duas coisas que, na minha opinião, são fundamentais para o funcionamento eficaz de formulários: validar e mascarar os valores digitados ainda no lado cliente. Por ser escrito em JavaScript, vForm não faz a validação do lado servidor. Você terá que fazer essa parte de acordo com a linguagem que seu servidor suporte.

Criando máscaras

Criar máscaras é fácil como preencher um campo.
Para criar sua máscara, adicione no local correto no script um nome para a máscara e seu formato.
Basta ter em mente que '§' significa números e '!' significa letras. O que não for um desses caracteres, será ele mesmo.

Por exemplo:

"vMaskTelefone":["(§§) §§§§-§§§§"]

"vMaskCartao":["§§§§ §§§§ §§§§ §§§§"]

Criando validações

Ao contrário das máscaras, para criar uma validação é necessário ter conhecimento sobre JavaScript, pois a função que validará o campo, logicamente, deverá ser escrita nessa linguagem.

Para inserir uma nova validação, crie no local destinado a função que irá validar determinado valor (como e-mails, CPFs, etc.) e crie seu alias na matriz 'validadores' dentro do código. Esse alias será usado dentro do atributo 'class' da tag label para chamar a função.

Ou seja, declare uma classe na tag label do campo desejado (com o mesmo nome do alias criado) para chamar a função quando o formulário for submetido.

Agora basta criar uma mensagem de erro para caso a validação não retorne verdadeiro. Utilize o nome do alias para definir para qual função essa mensagem de erro pertence.

Por exemplo:

function vEmail(t) {
...
return t.replace(/^\w[\w\.\+-]+@\w[\w\.\+-]+\.\w\w+$/,"")==""
...
}

validadores={
...
"vEmail":vEmail,
...
}

erros={
...
"vEmail":"digite corretamente o e-mail",
...
}

4. Demonstração

Máscara para telefones

Telefone:

<label for="input_telefone" class="vMaskTelefone">Telefone:</label>
<input id="input_telefone" name="input_telefone" maxlength="14" />

Máscara para cartões de crédito

Número do cartão:

<label for="input_cartao" class="vMaskCartao">Número do cartão:</label>
<input id="input_cartao" name="input_cartao" maxlength="19" />

Validação para campos obrigatórios

Nome:

<label for="input_nome" class="vObrigatorio">Nome:</label>
<input id="input_nome" name="input_nome" maxlength="45" />
<input type="submit" value="Enviar" />

Validação para campos de e-mail

E-mail:

<label for="input_email" class="vEmail">E-mail:
<input id="input_email" name="input_email" maxlength="45" />
<input type="submit" value="Enviar" />
</label>

5. Download

Download!

Histórico das alterações

v1.0

• Além dos inputs, funciona agora também com textareas;
• Substituído o esquema de usar expressões regulares para criar máscaras;
• Funciona mesmo que o campo não esteja dentro da tag label
  Exemplo: <label><input /><label> ou <label><label><input />;
• Mascara o campo ao mesmo tempo que este é preenchido;
• Mensagens de erro passam por um 'trim' para serem exibidas;
• A busca pelo campo de texto agora é através do 'for' do label.

Dependências
jQuery - Framework de desenvolvimento JavaScript

Visite também: