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.

Explorando mais a fundo as possibilidades de de usar o Firebug com o jQuery, encontrei o jQuerify.

Como havia mostrado no post Usando o Firebug com o jQuery, é possível pelo console do firebug executar comandos Javascript. Se o jQuery estiver na página que você deseja debugar, você pode usar todas as suas funcionalidades para navegar no documento através do Firebug. Mas e se o site for o Google? Se você deseja debugar em outros sites, ou até treinar o poder dos seletores do jQuery, existe o jQuerify.

Esta ferramenta nada mais é que um link que executa um javascript on the fly para inserir no documento atual uma tag script para carregar o jQuery e torná-lo disponível para ser utilizado no console do Firebug.

Executar jQuerify

Se você carregar o link acima para o seu favoritos, ou até mesmo copiar o link e colar no navegador quando estiver em qualquer página, você pode usá-lo para deixar o jQuery disponível e usar a vontade no console do Firebug.

Vale lembrar que as modificações da página são feitas localmente (com a página no cache) e não terá efeito se a página for recarregada, então para cada página aberta você tem que executar o link. O próprio código exibe uma mensagem de que foi inserido o jQuery com sucesso.

Abaixo vai um exemplo usado no site do Google:

Para utilizar este método, apenas arraste este link para o seu favoritos, e execute no console do firebug qualquer comando jQuery.

O Firebug salva o desenvolvedor Web. Isto não tenha dúvida. Além de suas várias utilidades, tanto para o HTML / CSS, tanto para o Javascript. Neste último ele deixa disponível em seu console todas as variáveis e funções para serem acessadas.

Sendo assim, se você usa o jQuery em sua página, você pode usar o console do Firebug para executar métodos do jQuery. Como assim? A figura abaixo ilustra esta ferramenta:

Como você pode ver, eu digitei no console o seletor $('.doc') que retornou um array com todos os elementos retornados pelo jQuery. Depois disto mandei retornar o primeiro elemento através da sintaxe $('h3').get(0). O firebug logo abaixo retorna o primeiro elemento da página atual. Mas ele vai mais além...

Como você pode ver abaixo, ele linka o elemento retornado a aba HTML e mostra o elemento no contexto da página inteira:

Assim, você pode ter um controle e debugar o seu código muito mais facilmente.

O que acontece se você executar o seletor abaixo no firebug?

Este seletor irá retornar como previsto o primeiro parágrafo ligando ao documento atual.

Além de tudo, você pode modificar o dom utilizando o método $('seletor').html('conteudo'). As possibilidades são várias, depende da necessidade. Então não hesite em explorar esta ferramenta.

Espero que tenha sido útil para todos. Um abraço e até o próximo post.