JQuery Form Validation – Validação de Datas no Google Chrome

Recentemente me deparei com um BUG seríssimo do plugin do JQuery, form validation. O campo “data:true” do jQuery Validation Plugin 1.9.0 aceita o formato de data em português (ex: 31/12/2011) em todos os navegadores exceto o Google Chrome (15.0.874.121 m, no momento desse artigo) e possivelmente no Safari, de acordo com algumas reclamações de outros programadores com o mesmo problema.

Ao tentar buscar alternativas de contornar o problema eu percebi que havia uma funcionalidade já desenvolvida para a validação de data no formato DE (alemão,”29.04.1994″ ou “1.1.2006”), bastante semelhante ao padrão brasileiro. Só que essa função não aparece no arquivo disponível para o download, ou foi retirada posteriormente como pode ser visto no repositório do GitHub do plugin. Sendo que na linha 275 (messages) alguns arquivos do site do plugin ainda fazem referência a tal função: “dateDE”.

Para normalizar a situação eu sugiro incluir algumas linhas de código no seu “jquery.validate.js”, vamos a elas:

Procure nas linhas 268/275 dentro de messages aonde aparece a mensagem de data e coloque abaixo de date a linha destacada:

messages: {
	required: 	"Campo obrigatório.",
	remote: 	"Por favor revise este campo.",
	email:		"Por favor digite um e-mail válido.",
	url: 		"Por favor digite uma URL válida.",
	date:		"Por favor digite uma data válida.",
	dateISO: 	"Por favor digite uma data válida (ISO).",
	dateDE: 	"Por favor digite uma data válida (DE, BR).",
	number: 	"Por favor digite um número válido.",
	digits: 	"Por favor digite somente números.",
	creditcard:	"Por favor digite um cartão de crédito válido.",
	equalTo: 	"Por favor digite o mesmo valor.",
	accept: 	"Por favor digite um valor com uma extensão válida.",
	maxlength: 	$.validator.format("Por favor digite mais de {0} caracteres."),
	minlength:	$.validator.format("Por favor digite pelo menos {0} caracteres."),
	rangelength:$.validator.format("Por favor digite um valor entre {0} e {1} caracteres."),
	range: 		$.validator.format("Por favor digite um valor entre {0} e {1}."),
	max: 		$.validator.format("Por favor digite um valor menor ou igual a {0}."),
	min: 		$.validator.format("Por favor digite um valor maior ou igual a {0}.")
},

Em seguida ache a função dateISO lá pela linha 1050 e insira a a função abaixo. Atente que há a função original e a alterada

// //http://docs.jquery.com/Plugins/Validation/Methods/dateDE
		dateDE:function(value,element){
			// Original DE
			//return this.optional(element)||/^\d\d?\.\d\d?\.\d\d\d?\d?$/.test(value);
			// Oposite ISO
			return this.optional(element)||/^\d{1,2}[\/-]\d{1,2}[\/-]\d{4}$/.test(value);
		},

Agora é só fazer a chamada normalmente em sua validação:

$("#form").validate({
	rules: 
	{
		data_nascimento: { required:true, minlength: 10, dateDE:true 	},
	}
});

Atente que esta validação não verifica se é uma data válida, somente se atende a um formato específico. Para a validação de uma data válida (meses com 30 ou 31 dias, anos bissextos e etc) é necessário
extender as funcionalidades do plugin. Em breve farei isso, até lá.