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:
[sourcecode language=”javascript” highlight=”8″]
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}.")
},
[/sourcecode]

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
[sourcecode language=”javascript”]
// //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);
},
[/sourcecode]
Agora é só fazer a chamada normalmente em sua validação:
[sourcecode language=”javascript”]
$("#form").validate({
rules:
{
data_nascimento: { required:true, minlength: 10, dateDE:true },
}
});
[/sourcecode]

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á.

2 Comentários para “JQuery Form Validation – Valida√ß√£o de Datas no Google Chrome”

  1. Leonidas

    Muito boa dica, me salvou a pele cara.

  2. FINALMENTE RESOLVIDO….Problema jquery validation no chrome!!! « Chiquito design ! cr3a7iv1ty

    […] ingl√™s, mas sinceramente ningu√©m resolveu isso direito, ¬†a n√£o ser pela dica abaixo retirada do blog do Rog√©rio Coli (vlw ae v√©io!). Pois a solu√ß√£o dele resolve, MAS EM PARTES, o problema, pois vc consegue inserir […]

Comente este artigo!