Mais acessados

quarta-feira, 21 de agosto de 2013

ASP.NET MVC - Validação de Datas sem complicação, JQuery Validation + JQuery.Globalize

Recentemente um amigo que começou a desenvolver em um projeto em ASP.NET MVC questionou a respeito da validação de datas. A validação sempre falha em server e client se você usar o campo do tipo DateTime e as DataAnnotations que o MVC traz. Como "paliativo" o pessoal usa um campo string e RegularExpressionAttribute, depois transfere esse valor para o campo DateTime original.


Data Válida, mas falha.



Porém, isso não é necessário, o que acontece é um problema com o localization do JQuery Val que não consegue validar o formato dd/MM/yyyy sem uma "ajuda". Neste post vou mostrar como concertar isso.


Instalando jquery.globalize

O jquery globalize é uma biblioteca de globalization e localization. Vou usá-la para parser da data que será validada.

Para instalar:

  1. Clique com botão direito na Solução->Manage Nuget Packages
  2. Vá em Online e digite na caixa Jquery Globalize


Agora é necessário adicionar o  jquery.globalize ao nosso BundleConfig

App_Start/BundleConfig.cs

Modificando a função de validação de datas do Jquery Val

Agora vem a parte "hardcoding". Com o jquery globalize vamos usar a função parseDate para validar nosso formato.

Views/Task/Create.cshtml

Na função acima estou alterando o método date para que a validação ocorra da forma que eu quero. Veja em Azul o formato que especifiquei. Logo, qualquer coisa diferente disso que for digitado em um campo com validação para data vai falhar.

O ideal é que você crie um arquivo de Script e coloque uma função anônima dentro para reutilizar.

Exemplo

Agora no ASP.NET é possível usar o seu campo com DateTime, sem problemas.

Models/Task.cs

View/Task/Create.cshtml

O campo pode ser criado normalmente. Quando você cria o campo como DateTime, por baixo dos panos o Html Helper já coloca que o campo é para ser validado como Data.

HTML Resultado para o Campo DateTime

Agora a validação funciona:

Espero que tenham gostado, o código fonte do exemplo pode ser baixado aqui.

5 comentários :

  1. Ao amigo aqui ó....hahahaha...Muito bom filipe, isso vai ajuda demais nas validações, para não ter que ficar inventando coisa que já está pronta e possa ser utilizada.

    ResponderExcluir
    Respostas
    1. Muito obrigado! Espero que isso resolva o problema aí na sua aplicação!

      Excluir
    2. Até que fim consegui fazer funcionar......Depois você coloca ai pra substituir essa mensagem padrão do DotNet.

      Excluir
    3. Excelente artigo Filipe. Vou aproveitar e fazer outra pergunta.
      Usando [DataType(DataType.Date)] no model, é renderizado um datepicker na edição e inserção. Porém ao abrir um registro para editar não é exibida a data. Sabe qual o problema? Ou melhor, sabe qual é a solução?

      Excluir
    4. Léo, se você inspecionar o HTML do campos marcado como DataType.Date você verá que ele tem o atributo type="date". A W3C homologou o formato padrão do value do campo como do tipo yyyy-mm-dd. Logo, para você conseguir exibir a data é necessário colocar um DataAnnotation deste tipo: [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)].

      Obrigado! Continue acompanhando! Essa semana começará uma série legal!

      Excluir