jQuery – Formatação de números decimais

Após algum tempo pesquisando na Internet e trabalhando em uma solução satisfatória e internacionalizável (pt_BR | en) para validar e formatar números decimais, em tempo de digitação, e que tenha suporte para a maioria dos navegadores, enfim concluí o trabalho. Os passos abaixo foram validados utilizando a versão do jQuery atrelada à versão 3.3.3 do RitchFaces:

1) Baixar o arquivo modificado do jquery.format.1.0.5.js (http://www.cloudgen.w0ng.hk) clicando aqui;

2) Baixar o arquivo jquery.format-1.2.js (http://www.asual.com/jquery/format) clicando aqui;

3) Globalizar a seguinte função javascript:

function prepararNumerosDecimais(locale) {
 $j.format.locale({
 number: {
 groupingSeparator: (locale == undefined ? '.' : locale.match("pt_BR") ? '.' : locale.match("en") ? ',' : '.'),
 decimalSeparator: (locale == undefined ? ',' : locale.match("pt_BR") ? ',' : locale.match("en") ? '.' : ',')
 }
 });

var DECIMAL = "decimal";
 $j('input:text[alt^="'+DECIMAL+'"]').each( function() {
 var escala = $j(this).attr('alt').split("-");
 var __decimalSeparator = (locale == undefined ? ',' : locale.match("pt_BR") ? ',' : locale.match("en") ? '.' : ',');
 if (escala.length == 3) {
 $j(this).format({type: DECIMAL, int: escala[1], precision: escala[2], decimal: __decimalSeparator});
 }
 });
}

4) Em todos os elementos TEXT em que se deseja validar e formatar números decimais, utilize a propriedade ‘alt’ de acordo com o seguinte exemplo: alt=“decimal-3-2”. Neste exemplo, deseja-se validar os números digitados que contenham 3 casas inteiras e 2 decimais, separados por PONTO (en) ou VÍRGULA (pt_BR).

5) No caso de JSF com RitchFaces, chamar a função global prepararNumerosDecimais(locale):

<a4j:outputPanel ajaxRendered="true">
 <h:inputHidden value="#{controladorLogin.localeString}" id="localeString" />
 <script type="text/javascript">
    prepararNumerosDecimais(j$('[id*="localeString"]').val());
 </script>
 </a4j:outputPanel>

 

VOILÁ!