Validar formulários com jQuery

Normalmente quando crio um formulário apenas depois de o processar é que o PHP envia a mensagem de erro o que pode ser chato para o cliente especialmente se o formulário for algo extenso. Não quero que o cliente desista apenas porque o formulário complicou tudo.

A solução é então usar JavaScript para detectar se os campos estão bem preenchidos ou não e nos dias de hoje não se justifica usar prompts para alertar o cliente de algo.
A solução é relativamente simples com jQuery.

//Filtros
var filters = {
requerido: function(el) {return ($(el).val() != ” && $(el).val() != -1);},
email: function(el) {return /^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+\.[A-Za-z0-9_.]+[A-za-z]$/.test($(el).val());},
telefono: function(el){return /^[0-9]*$/.test($(el).val());}};
// Extenções
$.extend({
stop: function(e){
if (e.preventDefault) e.preventDefault();
if (e.stopPropagation) e.stopPropagation();
}
});
// Código
$(document).ready(function(){
$(”form.validable”).bind(”submit”, function(e){
if (typeof filters == ‘undefined’) return;
$(this).find(”input, textarea, select”).each(function(x,el){
if ($(el).attr(”className”) != ‘undefined’) {
$.each(new String($(el).attr(”className”)).split(” “), function(x, klass){
if ($.isFunction(filters[klass]))
if (!filters[klass](el)) $(el).addClass(”error”);
});
}
});
if ($(this).find(”.error”).size() > 0) {
$.stop(e || window.event);
return false;
}
return true;
});
});


Explicação

A parte de processamento do script começa com $(document).ready o que faz com que o script seja processado apenas quando a página for carregada.

Quando o conteúdo é carregado o script percorre todos os formulários procurando uma class de CSS chamada validable (class=”validable”), podes editar esta variável no código do script, e adiciona um listener quando o formulário for submetido.

Após o formulário ser submetido o script percorre todos os elementos <input />, <textarea /> e <select /> procurando as suas classes e comparando-as com as declaradas na zona dos filtros.
O objecto filters é composto de uma série de métodos que são efectuados para validar os elementos de acordo com as classes.

Se o elemento do html não tiver uma classe declarada é adicionada a class error (class=”error”) ao elemento e não é efectuada a verificação do campo.

Podes testar o script aqui. Este tutorial foi adaptado para português. O tutorial original pode ser visto no anieto2k.com