Validação ASP.NET MVC com Globalização

Olá a todos,

Utilizando o ASP.NET MVC temos várias tarefas primárias feitas “automaticamente” para nós, entre elas, a questão de validação de dados: campos obrigatórios, formatos de dados e etc.

Entretanto, podemos encontrar dificuldade em alguns pontos da validação. Enquanto no Brasil o formato para uma data é dia/mês/ano, nos EUA já temos o formato mês/dia/ano.

Nos números também temos diferenças. 100,25 é um número válido para nós Brasileiros, mas não na cultura americana.

Problema => Solução

Veja o erro que temos num projeto simples, tentando inserir um produto com Nome e preço:

virgulaPara resolver esse problema, precisaríamos modificar a validação do JQuery, para entender a cultura brasileira. É uma saída válida, inclusive existem alguns posts com essa abordagem na internet.

Outra saída é utilizar a globalização do JQuery, que te permite ter a validação multi cultural (ou “curturar” como os Piracicabanos diriam).

Com o Globalize, temos muitas culturas disponíveis. pt-BR é uma delas! Maravilha alberto!

Basta abrir o Package Manage Console:

pmc

E digitar as palavras mágicas “Install-Package jquery.Validation.Globalize”:

pmc2

Note que ele vai instalar TODAS as culturas disponíveis. São aproximadamente 300, pode demorar um pouco.

Após isso, vamos a página de “template” (o _Layout) e adicionar os scripts de cultura:

    <script src="~/Scripts/globalize/globalize.js"></script>
    <script src="~/Scripts/globalize/cultures/globalize.culture.pt-BR.js"></script>

    @Scripts.Render("~/bundles/bootstrap")

    <script>

        $.validator.methods.number = function (value, element) {
            var val = Globalize.parseFloat(value);
            return this.optional(element) ||
                (val);
        }

        $.validator.methods.date = function (value, element) {
            var val = Globalize.parseDate(value);
            return this.optional(element) ||
                (val);
        }

        $(function () {

            Globalize.culture('pt-BR');

            jQuery.extend(jQuery.validator.methods, {
                range: function (value, element, param) {
                    //Use the Globalization plugin to parse the value
                    var val = Globalize.parseFloat(value);
                    return this.optional(element) || (
                        val >= param[0] && val <= param[1]);
                }
            });

        });
    </script>

Basta testar a aplicação (se lembrando de dar um CTRL+F5 na página ou limpar o cache completamente para o javascript não ficar perdido).

Para ficar ainda melhor, combine com uma máscara no campo, para evitar formatos errôneos como “1..0,2” e afins.

Download de exemplo

Fica aqui o projeto de exemplo no GitHub.

NOTA IMPORTANTE

Você poderá informar o valor 1.000,25, mas ele não será válido quando a validação ocorrer no servidor! Isso é devido ao model binder do ASP.NET MVC. Ainda não encontrei uma solução automática, mas você pode contornar isso tornando a propriedade uma string e convertendo-a em número no server side.

Nos projetos que atuo, deixamos apenas o formato “9999,99” disponível para não correr esse problema. Se seu cliente precisar tanto do ponto de separação de centenas, faça a gambiarra da string ou espere um post futuro com a solução. Se alguém já souber como resolver e quiser comentar, a comunidade fica agradecida! :)

Referências

ICanMakeThisWork

Blog Instance Factory

Tech Net (Baltieri)

Bônus

Não faz parte da validação, mas certifique-se que você esteja definindo a cultura no seu arquivo web.config. Isso vai te salvar de alguns problemas em relação a exibição de datas e etc.

wc

Caso você não tenha isso no projeto, o que é comum, adicione! (<globalization enableClientBasedCulture=”true” culture=”pt-BR” uiCulture=”pt-BR”/>)

É isso ai galera! Até mais.

Um pensamento sobre “Validação ASP.NET MVC com Globalização

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 )

Foto do Google+

Você está comentando utilizando sua conta Google+. 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 )

Conectando a %s