Coleção de métodos para o plugin validate do jQuery.

Posted on March 27, 2009 by Danilo

Na verdade não é bem uma coleção com dezenas de métodos, a intenção do post é simplesmente mostrar que é possível e fácil criar métodos para o plugin.

Para quem não sabe o que é o validate, recomendo saber do que se trata, você pode ganhar muito tempo no desenvolvimento utilizando o plugin, principalmente para desenvolver interface de back end, com diversas validações. Tem um post do Alexandre Magno antigo, porém muito bom, explicando o que é o plugin, o que faz, como utilizá-lo e um exemplo bem simples de um formulário validado pelo plugin.

Quando se faz o download do validate, ele vêm com uma coleção de médotos, mas alguns que nós precisamos, como verificação de data ( formato dd/mm/aaaa ) e verificação de cpf, não tem.

Alguns métodos que serão postados aqui não fui eu quem fez, queria dar os créditos a quem fez, porém não sei quem foi. Mas… vamos ao ponto, veja como é facil adicionar novos métodos.

Verificação de CPF

O código abaixo adiciona um Método que chamamos de “verificaCPF” :

jQuery.validator.addMethod("verificaCPF", function(value, element) {
	value = value.replace('.','');
	value = value.replace('.','');
	cpf = value.replace('-','');
	while(cpf.length < 11) cpf = "0"+ cpf;
	var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
	var a = &#91;&#93;;
	var b = new Number;
	var c = 11;
	for (i=0; i<11; i++){
		a&#91;i&#93; = cpf.charAt(i);
		if (i < 9) b += (a&#91;i&#93; * --c);
	}
	if ((x = b % 11) < 2) { a&#91;9&#93; = 0 } else { a&#91;9&#93; = 11-x }
	b = 0;
	c = 11;
	for (y=0; y<10; y++) b += (a&#91;y&#93; * c--);
	if ((x = b % 11) < 2) { a&#91;10&#93; = 0; } else { a&#91;10&#93; = 11-x; }
	if ((cpf.charAt(9) != a&#91;9&#93;) || (cpf.charAt(10) != a&#91;10&#93;) || cpf.match(expReg)) return false;
	return true;
}, "Informe um CPF válido."); // Mensagem padrão 
&#91;/sourcecode&#93;

E agora na hora de validar seu formulário, você já pode utilizar o método adicionado:

&#91;sourcecode language="javascript"&#93;
$("form#cadastro").validate({
	rules: {
		'CampoCPF': { 
			required: true,
			verificaCPF: true 
		}				
	},
	messages: {
		CampoCPF: { 
			required: "Digite seu cpf"
			verificaCPF: "CPF inválido"
		}				
	},
});	
&#91;/sourcecode&#93;

<h4> Verificação de Data (formato dd/mm/aaaa) </h4>

Agora o método se chama dateBR e a mensagem padrão (caso não seja colocada outra na hora de usar o validate, será "Informe uma data válida".


jQuery.validator.addMethod("dateBR", function(value, element) {            
	 //contando chars 
	if(value.length!=10) return false;
	// verificando data
	var data 		= value;
	var dia 		= data.substr(0,2);
	var barra1		= data.substr(2,1);
	var mes 		= data.substr(3,2);			
	var barra2		= data.substr(5,1);
	var ano 		= data.substr(6,4);			
	if(data.length!=10||barra1!="/"||barra2!="/"||isNaN(dia)||isNaN(mes)||isNaN(ano)||dia>31||mes>12)return false; 
	if((mes==4||mes==6||mes==9||mes==11)&amp;&amp;dia==31)return false;
	if(mes==2 &amp;&amp; (dia>29||(dia==29&amp;&amp;ano%4!=0)))return false;
	if(ano < 1900)return false;
	return true;		
}, "Informe uma data válida");  // Mensagem padrão 
&#91;/sourcecode&#93;

<h4> Verificação de Data e Hora (formato dd/mm/aaaa hh:mm) </h4>


jQuery.validator.addMethod("dateTimeBR", function(value, element) {            
	 //contando chars 
	if(value.length!=16) return false;
	 // dividindo data e hora
	if(value.substr(10,1)!=' ') return false; // verificando se há espaço				 
	var arrOpcoes = value.split(' ');
	if(arrOpcoes.length!=2) return false; // verificando a divisão de data e hora
	// verificando data
	var data 		= arrOpcoes[0];
	var dia 		= data.substr(0,2);
	var barra1		= data.substr(2,1);
	var mes 		= data.substr(3,2);			
	var barra2		= data.substr(5,1);
	var ano 		= data.substr(6,4);			
	if(data.length!=10||barra1!="/"||barra2!="/"||isNaN(dia)||isNaN(mes)||isNaN(ano)||dia>31||mes>12)return false; 
	if ((mes==4||mes==6||mes==9||mes==11)&amp;&amp;dia==31)return false;
	if (mes==2 &amp;&amp; (dia>29||(dia==29&amp;&amp;ano%4!=0)))return false;
	// verificando hora
	var horario 	= arrOpcoes[1];	
	var	hora 		= horario.substr(0,2);
	var doispontos 	= horario.substr(2,1);
	var minuto 		= horario.substr(3,2);			
	if(horario.length!=5||isNaN(hora)||isNaN(minuto)||hora>23||minuto>59||doispontos!=":")return false;
	return true;		
}, "Informe uma data e uma hora válida");

Se alguém tiver (ou fizer) o método de CNPJ (ou algum outro legal que não tem aqui) me manda por e-mail ou posta aqui nos comentários.

[]s

38 thoughts on “Coleção de métodos para o plugin validate do jQuery.”

Alexandre Magno on March 27, 2009 at 3:51 pm said:

Muito bom Danilo. Podemos pegar essa coleção de métodos de uso comum no brasil para criar um additional-methods nacional para ser usado com o Validate. Abraços e sucesso!
Alexsandro on March 28, 2009 at 1:57 am said:

Ohh legal este do CPF..
Eu cheguei a criar 2:

veja:

jQuery.validator.addMethod(“maiorigualque”, function(value, element,target) {
return parseInt(jQuery(target).val()) <= parseInt(value);
}, “Your field must be much more.”);

e

jQuery.validator.addMethod(“datamaiorigualque”, function(value, element,target) {
var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
var anotherValue = jQuery(target).val();
if( re.test(value) && re.test(anotherValue) ){
var adata = value.split(‘/’);
var gg = parseInt(adata[0],10);
var mm = parseInt(adata[1],10);
var aaaa = parseInt(adata[2],10);
var xdata = new Date(aaaa,mm-1,gg);

var adata = anotherValue.split(‘/’);
var gg = parseInt(adata[0],10);
var mm = parseInt(adata[1],10);
var aaaa = parseInt(adata[2],10);
var ydata = new Date(aaaa,mm-1,gg);

if ( ydata <= xdata )
check = true;
else
check = false;
} else
check = false;
return this.optional(element) || check;
}, “Your date field must be much more.”);

Falow…
Chris Benseler on March 28, 2009 at 11:06 am said:

Uso direto o Validate da jQuery! Mto boa mesmo, recomendada!
Wellsio on May 5, 2009 at 7:01 pm said:

jQuery.validator.addMethod(“verificaCNPJ”, function(value, element) {
cnpj = value.replace(/\D/g,””);
while(cnpj.length < 14) cnpj = “0”+ cnpj;
var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
var a = [];
var b = new Number;
var c = [6,5,4,3,2,9,8,7,6,5,4,3,2];

for (i=0; i<12; i++){
a[i] = cnpj.charAt(i);
b += a[i] * c[i+1];
}

if ((x = b % 11) < 2) { a[12] = 0 } else { a[12] = 11-x }
b = 0;
for (y=0; y<13; y++) {
b += (a[y] * c[y]);
}

if ((x = b % 11) < 2) { a[13] = 0; } else { a[13] = 11-x; }
if ((cnpj.charAt(12) != a[12]) || (cnpj.charAt(13) != a[13]) || cnpj.match(expReg) ) return false;
return true;
}, “CNPJ inválido.”); // Mensagem padrão
Édipo on June 16, 2009 at 5:13 pm said:

Só uma correção para a maioria para o método no cnpj, ele não trata o caso de vc ter especificado requerid: false… arrumei aqui colocando uns if para verificar se o campo é igual a zero
Mahmoud Ahmadinejad on June 25, 2009 at 10:43 am said:

Senhores,
Estou com problemas para excluir categorias e subcategorias de cursos.
Na tela onde era para estar uma concordância (Ok, Isso, Vai, etc…) aparecem dois botões Cancelar… Pressionando qualquer um deles, não é possível excluir a categoria.
O que faço?
Deckard Cain on August 8, 2009 at 8:59 pm said:

Édipo, poderia ter postado a correção..
Juliana Machado on November 3, 2009 at 4:31 pm said:

Eu não consegui usar essa validação de data no formato dd/MM/yyyy.

1- Esse método: “jQuery.validator.addMethod(“dateBR”, function(value, element)” eu devo colocar no final do arquivo “jquery.validate.js”?

2- E esse outro método: “$(“form#cadastro”).validate” eu coloco entre as tags do form onde eu for utilizar essa validação?

eu fiz dessa forma:

$(“form#cadastro”).validate({
rules: {
‘txtData’: {
required: true,
dateBR: true
}
},
messages: {
txtData: {
required: “Digite sua data”,
dateBR: “Data inválida”
}
},
});

e inclui essa campo no meu form:
Juliana Machado on November 3, 2009 at 4:32 pm said:

e inclui esse campo txtData no meu form:
Juliana Machado on November 3, 2009 at 4:33 pm said:

Eu não consegui usar essa validação de data no formato dd/MM/yyyy.

1- Esse método: “jQuery.validator.addMethod(“dateBR”, function(value, element)” eu devo colocar no final do arquivo “jquery.validate.js”?

2- E esse outro método: “$(“form#cadastro”).validate” eu coloco entre as tags do form onde eu for utilizar essa validação?

eu fiz dessa forma:

$(“form#cadastro”).validate({
rules: {
‘txtData’: {
required: true,
dateBR: true
}
},
messages: {
txtData: {
required: “Digite sua data”,
dateBR: “Data inválida”
}
},
});

e inclui esse campo txtData no meu form
Gaspar Argüello on November 6, 2009 at 12:37 pm said:

Olá a todos,

em primeiro lugar, PARABÉNS pelo metodo do plugin validade jQuery.
Eu estou usando ja faz um tempinho e em ajuda bastasta, em meus sites.
Inclui o validador de CNPJ no proprio codigo do meu jquery.validate.jp na parte de “methods:”
cnpj: function(value, element) {
cnpj = value.replace(/\D/g,””);
while(cnpj.length < 14) cnpj = “0”+ cnpj;
var expReg = /^0+$|^1+$|^2+$|^3+$|^4+$|^5+$|^6+$|^7+$|^8+$|^9+$/;
var a = [];
var b = new Number;
var c = [6,5,4,3,2,9,8,7,6,5,4,3,2];

for (i=0; i<12; i++){
a[i] = cnpj.charAt(i);
b += a[i] * c[i+1];
}

if ((x = b % 11) < 2) { a[12] = 0 } else { a[12] = 11-x }
b = 0;
for (y=0; y<13; y++) {
b += (a[y] * c[y]);
}

if ((x = b % 11) < 2) { a[13] = 0; } else { a[13] = 11-x; }
if ((cnpj.charAt(12) != a[12]) || (cnpj.charAt(13) != a[13]) || cnpj.match(expReg) ) return false;
return true;
},

estou trabalhando na Espanha e precisava de um metodo para validar telefonone, para o Brasil. Estou em um projeto de uma página para o Brasil assim que se alguem puede me ajudar…
estaria muito agradecido.
Gaspar Argüello on November 6, 2009 at 12:38 pm said:

uso da validação:

$(“#form_contato”).validate({
rules: {
cnpj: {
required: true,
cnpj: true
}
}
});
Rafael on January 29, 2010 at 12:17 pm said:

Como utilizo o metodo “datamaiorigualque” ?

rules: {
“valor”: {
required: true,
maiorigualque: 2
}
},
Rafael on January 29, 2010 at 3:20 pm said:

Sobre o post acima consegui com que funcionase estou usando a versão da jquery 1.3.2, não estava conseguindo fazer com que a função rodase então efetuei o debug e removi a chamada “jQuery” da linha
jQuery(target).val();
deixando apenas a variavel target e funcionou em ambas as funções postadas aqui.

Em relação a função dateBR fiz apenas a substituição do caracter especial & pelo caracter & somente.

Parabens aos criadores das funções.
Alexsandro on April 2, 2010 at 3:15 pm said:

Rafael, este datamaiorigualque é apenas para DATA dd/MM/yyyy

datamaiorigualque:”#id_do_campo_a_comparar”

Certo?
Rayan on May 11, 2010 at 4:46 pm said:

Muito bom…
Demorei um pouco para conseguir fazer funcionar direitinho mais no final deu tudo certo…

quem quiser os codigos que eu estou usando me adiciona no twitter que eu passo
Romulo Sas on July 26, 2010 at 3:21 pm said:

Juliana torca o Jquery. por $.

Fiz aqui e rodou ;D
willians on September 16, 2010 at 4:06 pm said:

http://blog.shiguenori.com/2009/05/29/validar-cpf-cnpj-com-jquery-validate/

neste site tem o de cnpj
Tiago Martins on November 16, 2010 at 3:14 pm said:

Muito bom… só um detalhe. a tua validação de data não está 100% não ta validando ano bissexto como deveria, 1900 não foi bissexto, 2000 sim. A validação correta seria assim:

if(mes==2 && (dia>29||(dia==29 && ano % 4 != 0 || ano % 100 == 0 && ano % 400 != 0)))return false;

Ou seja, o ano tem que ser divisível por 4 e (não divisível por 100 ou ser divisível por 400).

o código completo seria:

jQuery.validator.addMethod(“data”, function(value, element) {
//contando chars
if(value.length!=10) return false;
// verificando data
var data = value;
var dia = data.substr(0,2);
var barra1 = data.substr(2,1);
var mes = data.substr(3,2);
var barra2 = data.substr(5,1);
var ano = data.substr(6,4);
if(data.length!=10||barra1!=”/”||barra2!=”/”||isNaN(dia)||isNaN(mes)||isNaN(ano)||dia>31||mes>12)return false;
if((mes==4||mes==6||mes==9||mes==11)&&dia==31)return false;
if(mes==2 && (dia>29||(dia==29 && ano % 4 != 0 || ano % 100 == 0 && ano % 400 != 0)))return false;
if(ano < 1900)return false;
return true;
}, "Informe uma data válida"); // Mensagem padrão
Pingback: JQuery / JQuery Validation / Síncrono e Assíncrono / CPF único no banco de dados / Ajax Síncrono com JQuery :: Flávio Silveira
Weuller on January 1, 2011 at 10:03 pm said:

Aqui, eu adaptei o de data e hora para ser somente hora, no formato, 23:02:47, hora, minuto e segundos, ta qui pra quem quiser também, compartir é sempre bom, quem tiver mais poste ai tbm ;D

jQuery.validator.addMethod(“hora”, function(value, element){
var horario = value;
var hora = horario.substr(0,2);
var doispontos = horario.substr(2,1);
var minuto = horario.substr(3,2);
var doispontos2 = horario.substr(5,1);
var segundos = horario.substr(6,2);
if(horario.length!=8||isNaN(hora)||isNaN(minuto)||isNaN(segundos)||hora>23||minuto>59||segundos>59||doispontos!=”:”||doispontos2!=”:”)return false;
return true;
}, “Informe uma hora valida: Ex: 22:35:12!”);

Parabéns, muito bom o conteúdo do site.
Weuller on January 2, 2011 at 12:16 am said:

Não consegui adicionar uma metodo que validasse se o compo se trata de algum valor, no caso se possuise virgula(,), alguem da um help? pensei em limitar por exemplo, para 10 caracteres, e quebrar todos, e verificar se possui alguma virgula em algum deles, se tiver pelo menos 1, retorna true, se não false, ou será que tem algum jeito mais facil? já aproveitando, restringir para aceitar, somente numero e virgula. o que é dificil é que o valor pode ser, 1,00, 10,00, 100,00 etc.
Caue Rego on February 23, 2011 at 5:39 pm said:

So para constar, segue mais uma forma de implementar o CPF no jquery validate que nao sei quem fez: http://jsbin.com/agida4
Caue Rego on March 2, 2011 at 10:05 pm said:

e aqui a versao que modifiquei para permitir mais flexibilidade no uso: http://jsbin.com/agida4/16/edit
luiz alberto on March 26, 2011 at 2:36 am said:

como faço mais de um jQuery.validator.addMethod em uma mesmo formulário. por exemplo, quero criar mais de um método em um mesmo form para dois campos distintos. por exemplo, quero adicionar um método para validar telefone e outro para validar nome de pessoa. como faço?
wouerner on August 17, 2011 at 10:59 am said:

vlews pelo validador de cpf ..its good man!!!
vinicius on October 28, 2011 at 9:49 am said:

Parabens pelo blog cara… show de bola mesmo!!
Andréa on January 13, 2012 at 8:48 am said:

Pessoal,

Alguém tem um metodo para validação de moeda R$?

Estou precisando, mas não estou encontrando…

Muito bom o blog! Parabéns!
Luis Equinox on January 19, 2012 at 11:16 am said:

Galera, elaborei a validação de data maior que a atual com base no script acima…

jQuery.validator.addMethod(“dateBR”, function(value, element) {

if(value.length!=10) return false;
// verificando data enviada no form
var data = value;
var dia = data.substr(0,2);
var barra1 = data.substr(2,1);
var mes = data.substr(3,2);
var barra2 = data.substr(5,1);
var ano = data.substr(6,4);
//verificar data atual
var vdt = new Date();
var vdia = vdt.getDate();
var vmes = vdt.getMonth()+1;
var vano = vdt.getFullYear();

if(ano > vano)return false;
if(mes > vmes && ano >= vano)return false;
if(mes == vmes && ano >= vano && dia > vdia)return false;
if(data.length!=10||barra1!=”/”||barra2!=”/”||isNaN(dia)||isNaN(mes)||isNaN(ano)||dia>31||mes>12)return false;
if((mes==4||mes==6||mes==9||mes==11) && dia==31)return false;
if(mes==2 && (dia>29||(dia==29 && ano%4!=0)))return false;
if(ano < 1900)return false;
return true;
}, "Informe uma data válida"); // Mensagem padrão
Rafael Albani on February 12, 2012 at 2:14 pm said:

Ótimo post, eu desenvolvi um método para validar a entrada de apenas números:

$.validator.addMethod(‘numericOnly’, function (value) {
res = value.split(“”);
for (c in res) {
ver = /[0-9]/.test(res);
if(ver == false) {
return false;
}
}
return true;
}, ‘Forneça apenas valores numéricos (0-9)’
);
Diego on April 14, 2012 at 3:32 am said:

Olá estou com problemas na validação de cpf!! ele não está funcionando o FIREFOX!

alguma dica!
Rodrigo on April 22, 2012 at 8:32 pm said:

Espero náo ter que dar manutencao em um codigo js tão confuso!!!
Fábio on August 1, 2012 at 3:27 pm said:

Salvou minha vida, o esquema de data ta perfeito!
Um abraço
Carlos on October 7, 2012 at 12:51 pm said:

Sobre a data-BR:

Desejo fazer a validação SOMENTE SE PREENCHER o campo data.

Coloquei o seguinte:
txtdata_galeria: {required: false, dateBR: true}

Ele continua pedindo “uma data válida”

Tem algo errado? Alguém sabe como resolver?
Pingback: jQuery Validation – adicionando e removendo regras
Cristiano on May 8, 2013 at 8:15 pm said:

O código EAN13 é aquele codigo que tem em todos os produtos do mercado… é o mesmo que os caixas usam para identificar seu produto e cobrar por ele quando vai fazer compras no supermercado.
Eu já penei muito procurando um modo de validar um código EAN13, mas agora resolvi fazer o meu e segue abaixo pra quem mais precisar… Abraço!

/*
*
* EAN13
*********************************************************/

jQuery.validator.addMethod(“ean13”, function(value, element){

if( value.length == 13 ){ // verifica se há 13 dígitos
var dv = value.substr( -1 ); // isola o dígito verificador original
var ean = value.substr( 0, (value.length – 1) ); // retira o dígito verificador do código
} else if( value.length != 12 ){ // verifica se código possui 12 dígitos
// Código inválido
return false;
}

// Soma os números de posições pares
var even = parseInt(ean.charAt(1)) +
parseInt(ean.charAt(3)) +
parseInt(ean.charAt(5)) +
parseInt(ean.charAt(7)) +
parseInt(ean.charAt(9)) +
parseInt(ean.charAt(11));
// Multiplica este resultado por 3
even = even * 3;

// Soma os números de posições ímpares
var odd = parseInt(ean.charAt(0)) +
parseInt(ean.charAt(2)) +
parseInt(ean.charAt(4)) +
parseInt(ean.charAt(6)) +
parseInt(ean.charAt(8)) +
parseInt(ean.charAt(10));

// Soma os dois produtos
var total = even + odd;

// Calcula o Dígito Verificador
// Divide o produto total por 10 e armazena o resto da divisão
var digito = total % 10;

// Se o resto não for zero retira este resto de 10
if( digito != 0 ){
digito = 10 – digito;
}

// Se o dígito calculado for diferente do informado
// o código é inválido
if ( dv != digito ) return false;
return true;

}, “Código EAN13 inválido”); // Mensagem padrão
Ernani José on June 24, 2013 at 11:56 am said:

Muito obrigado pela coleção,

testei aqui a validação de CPF e CNPJ e funcionou perfeitamente.

Valeu e muito obrigado.
Jonathan on July 25, 2013 at 3:22 pm said:

Bah valeu!
100% funcional
Abraço sucesso.

TidBits

Desenvolvimento de Front End

Coleção de métodos para o plugin validate do jQuery.

Verificação de CPF

38 thoughts on “Coleção de métodos para o plugin validate do jQuery.”

Leave a Reply Cancel reply