Webpoint

Depois de ter mostrado o Ajax Form Plugin, como prometido irei falar neste post sobre o Plugin para jQuery Validate.

O que é o Validate?

O Validate é um plugin para o jQuery que permite que você possa centralizar todas as validações de dados no formulário, tanto no cliente como no servidor. Neste post irei falar sobre a validação no cliente somente.

Este é um dos plugins mais antigos e o mais completo na minha opinião. Você pode controlar todas as validações, mensagens e ainda ter a possibilidade de facilmente criar novos métodos de validação. Além de tudo, ele é integrado com o Ajax Form Plugin para que os dados enviados com sucesso seja enviado por Ajax.

Irei mostrar o funcionamento básico deste plugin na prática:

Exemplo do Validate

Neste exemplo, há um formulário com os campos nome, idade, e-mail e país. Esses campos não foram usados por acaso. O campo nome foi usado para mostrar como é simples a validação de campos que precisam ser preenchidos com algum valor. No campo idade irei ilustrar como criar um novo método para o Plugin, neste caso o usuário tem que ter mais de 18 anos. No campo e-mail irei mostrar como pode ser usado os métodos já definidos no plugin. O campo país mostra como validar selects, radios e checkboxes.

As mensagens de erro e como elas irão serem mostradas são totalmente personalizáveis, tanto onde e como elas irão aparecer tanto como no CSS. Por padrão, o plugin irá gerar um label logo depois do campo com a classe error. Isso pode ser modificado em suas configurações facilmente. Além do label, o input do elemento que não foi validado corretamente também irá ter uma classe error.

Vamos ao código HTML do formulário:

<form name="validate" id="validate" action="validate.html" method="post">

<label for="nome">Nome:</label>
<input type="text" name="nome" />

<label for="idade">Idade:</label>
<input type="text" name="idade" />

<label for="email">E-mail:</label>
<input type="text" name="email" />

<label for="pais">Pa&iacute;s:</label>
<select type="text" name="pais">
<option value="">Selecione</option>
<option value="brasil">Brasil</option>
<option value="canada">Inglaterra</option>
</select>

<input type="submit" value="Validar" />

</form>

Assim, o estilo da classe de erro ficaria:

label.error {
border: 1px solid red;
color: red;
font-weight: bold;
padding: 3px;
background-color: #99CCFF;
margin: 6px 0;
width: 120px;
text-align: center;
}

Note que foi passado o elemento label para estilizar somente a classe error aplicada a algum label e não o elemento input.

Depois de fazer o download do plugin, você poderá utilizar o seguinte código no head do documento abaixo do arquivo referente ao core do jQuery:

$(function(){

$("#validate").validate({

submitHandler: function(form) {
$(form).submit(function(){
alert('todos os dados foram preenchidos corretamente');
return false

});
},
rules: {
nome: 'required',
idade: {
required: true,
minAge: 18
},
email: {
required: true,
email: true
},
pais: 'required'
},
messages: {
nome: 'Você não preencheu seu nome',
idade: {
required: 'Você não preencheu sua idade',
},
email: {
required: 'Você precisa preencher um e-mail',
email: 'Endereço de e-mail não válido'
},
pais: 'Você precisa escolher um país'
}

});

});

Irei explicar passo a passo o código:

Primeiro, você passa um seletor para referenciar um formulário(neste caso o id do formulário) e executa o método validate, que aceita um objeto de parâmetros:

• submitHandler: esta opção irá especificar o comportamento do formulário quando a validação passar com sucesso. Aqui é onde o plugin pode ser integrado com o Ajax Form plugin, o parâmetro form é a referência do formulário passado no seletor do jQuery.
• rules: Este é o objeto de regras de validação. Cada item deste objeto refere-se ao name do formulário. Se o formulário apenas não pode ser vazio, você pode passar uma string 'required', caso contrário você tem que especificar dentro deste campo todas as regras de validação, que seria um novo objeto. O campo nome e país neste caso apenas não pode ser vazio, enquanto que os demais possui outras regras.
• messages: da mesma forma que o rules, mas com especificação de qual mensagem será exibida quando a validação não passar. Cada método possui mensagens pré-definidas que estão em inglês, você pode especificar qualquer mensagem aqui ou alterar o código fonte dos métodos de validação para aparecer mensagens padrões.

No caso da regra minAge eu criei um novo método de validação:

jQuery.validator.addMethod("minAge", function(value, element, params) {
return this.optional(element) || value > params;
}, "Você precisa ter mais de 18 anos.");

Esta é a sintaxe para criação de novos métodos para o Validate. Primeiro você atribui um nome para o método (para ser usado dentro do objeto rule) e passa uma função que retorna um valor Booleano para verificar se a validação confere. O primeiro parâmetro é o valor digitado ou escolhido pelo usuário(no caso do input, o valor digitado e do select, o valor escolhido). O segundo parâmetro é o elemento que está sendo validado (Elemento DOM) e o terceiro é o parâmetro passado na regra de validação. No caso da validação de idade, o primeiro parâmetro é a idade que o usuário digitou, o segundo é o input e o terceiro é o valor inserido na regra. Sendo assim ele verifica primeiro se o parâmetro é opcional, por que caso seja, ele não precisa validar e o segundo verifica se o valor digitado é maior que o valor atribuido na regra (você pode, por exemplo, colocar na regra que a idade seja maior que 21).

O ideal é colocar todas as regras de validação personalizadas em um arquivo javascript separado e inserir logo depois do plugin Validate.

Com a validação de selects, checkboxes e radio buttons é possível trabalhar da mesma forma que um input. No caso do select, o value colocado para o option "Selecione um país " é vazio, sendo assim ele não irá passar com sucesso na validação.

Espero que tenha ajudado a todos e não se esqueçam de olharem a documentação, experimentar e colocar em prática para descobrir todas as funcionalidades do Plugin.

Artigos relacionados

• Ajax form