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

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 = [];
	var b = new Number;
	var c = 11;
	for (i=0; i<11; i++){
		a[i] = cpf.charAt(i);
		if (i < 9) b += (a[i] * --c);
	}
	if ((x = b % 11) < 2) { a[9] = 0 } else { a[9] = 11-x }
	b = 0;
	c = 11;
	for (y=0; y<10; y++) b += (a[y] * c--);
	if ((x = b % 11) < 2) { a[10] = 0; } else { a[10] = 11-x; }
	if ((cpf.charAt(9) != a[9]) || (cpf.charAt(10) != a[10]) || cpf.match(expReg)) return false;
	return true;
}, "Informe um CPF válido."); // Mensagem padrão

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

$("form#cadastro").validate({
	rules: {
		'CampoCPF': {
			required: true,
			verificaCPF: true
		}
	},
	messages: {
		CampoCPF: {
			required: "Digite seu cpf"
			verificaCPF: "CPF inválido"
		}
	},
});

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

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

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

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

bookmark bookmark bookmark bookmark bookmark bookmark bookmark

Você pode se interessar também por:

17 Responses to “Coleção de métodos para o plugin validate do jQuery.”

  1. 1
    Alexandre Magno Says:

    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!

  2. 2
    Alexsandro Says:

    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…

  3. 3
    Chris Benseler Says:

    Uso direto o Validate da jQuery! Mto boa mesmo, recomendada!

  4. 4
    Wellsio Says:

    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

  5. 5
    Édipo Says:

    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

  6. 6
    Mahmoud Ahmadinejad Says:

    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?

  7. 7
    Deckard Cain Says:

    Édipo, poderia ter postado a correção..

  8. 8
    Juliana Machado Says:

    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:

  9. 9
    Juliana Machado Says:

    e inclui esse campo txtData no meu form:

  10. 10
    Juliana Machado Says:

    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

  11. 11
    Gaspar Argüello Says:

    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.

  12. 12
    Gaspar Argüello Says:

    uso da validação:

    $(“#form_contato”).validate({
    rules: {
    cnpj: {
    required: true,
    cnpj: true
    }
    }
    });

  13. 13
    Rafael Says:

    Como utilizo o metodo “datamaiorigualque” ?

    rules: {
    “valor”: {
    required: true,
    maiorigualque: 2
    }
    },

  14. 14
    Rafael Says:

    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.

  15. 15
    Alexsandro Says:

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

    datamaiorigualque:”#id_do_campo_a_comparar”

    Certo?

  16. 16
    Rayan Says:

    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

  17. 17
    Romulo Sas Says:

    Juliana torca o Jquery. por $.

    Fiz aqui e rodou ;D

Leave a Reply