FINALMENTE RESOLVIDO….Problema jquery validation no chrome!!!

Publicado: dezembro 13, 2012 em Sem categoria

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

Tem inúmeras “tentativas” de solução na web hoje seja em português ou 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 a data no formata brasileiro, mas não valida se é uma data válida, aliás ele comenta sobre isso no seu post. (abaixo na íntegra)…

Bom, sendo assim resolvi aprimorar o trabalho dele oferecendo a validação da data usando expressões regulares…Agora aqueles programadores de plantão que estavam choramigando na quebrada porque não dava certo em nenhum dos browsers do mercado…pq se vc arrumava no chrome dava pau no FF e assim por diante… Agora fiquem felizes problema está FINALMENTE RESOLVIDO!

• VEJA ABAIXO…post do Rogério somada com a minha contribuição!!! … :))

—————————————————————————————————————————————————

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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

1
2
3
4
5
6
7
        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:

1
2
3
4
5
6
$("#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.

BOM… até aqui o rogério mandou bem…faltou a validação para uma data válida…Eis aqui a solução!

Nessa parte do código substitua a linha 6 pela expressão regular abaixo:

return this.optional(element)||/^((((0?[1-9]|1\d|2[0-8])\/(0?[1-9]|1[0-2]))|((29|30)\/(0?[13456789]|1[0-2]))|(31\/(0?[13578]|1[02])))\/([0-9]{2}?\d\d))$|((29\/0?2\/)([0-9]{2}?(0[48]|[2468][048]|[13579][26])|(20)?00))$/.test(value);

1
2
3
4
5
6
7
        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);
        },

 

Ah! não esqueça de alterar a chamada na função, ou no campo input trocando date:true por dateDE:true …conforme a opção que você adotou!

Abraços!

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s