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.

Este plugin tem por objetivo acessar uma query string anexada numa url similar a maneira feita pelo GET em uma linguagem de servidor

Como usá-lo?

//url: http://www.alexandremagno.net/jquery/plugins/jget/
//?test=var&test2=var2
 
var save1 = $.jget['test'];
 
alert(save1);
 
//imprime 'var'
 
var save2 = $.jget['test2'];
 
alert(save2);
 
//imprime 'var2'

Plugin no site do jQuery

http://plugins.jquery.com/project/jget

Download

http://plugins.jquery.com/files/jquery.jget_3.zip

Página de exemplo

http://www.alexandremagno.net/jquery/plugins/jget

Você pode anexar uma query string e se estiver usando o Firefox com o firebug, poderá ver no console as variáveis anexadas. Exemplo: http://www.alexandremagno.net/jquery/plugins/jget/?test=jgetplugin

Autor

Alexandre Magno

Licença

MIT - http://www.opensource.org/licenses/mit-license.php

Este plugin centraliza qualquer elemento através do método CSS da margem negativa.

Como usá-lo

Sem nenhum argumento, o método do plugin cetraliza horizontalmente e verticalmente.

$("class_or_id").center();

Você pode também especificar a direção de alinhamento

$("class_or_id").center({
 
    horizontal: false // somente vertical
 
});
 
$("class_or_id").center({
 
vertical: false //somente horizontal
 
});

O plugin no site do jQuery

http://plugins.jquery.com/project/elementcenter

Suporte

Este plugin foi testado no IE 6, IE 7, Safari 3, Firefox 2+

Dependências

Este plugin requer o Dimensions plugin para funcionar corretamente

Página de teste

http://www.alexandremagno.net/jquery/plugins/center

Documentação original

http://code.google.com/p/jquerydevbrazil/wiki/jQueryCenterPlugin

Download

http://code.google.com/p/jquerydevbrazil/downloads/list

Autor

Alexandre Magno - http://www.alexandremagno.net

Licença

http://www.opensource.org/licenses/mit-license.php