Aplicando máscaras nos campos de formulário

Vejo frequentemente essa pergunta nos fóruns: Como adicionar máscara de CPF? Como adicionar máscara no campo telefone? Como colocar máscara de data? E para cada pergunta uma resposta diferente.

Então resolvi ser igual a todo mundo e fazer diferente. Se você ainda não ligou o nome à pessoa, eis aqui alguns exemplos de máscaras:

(99) 9999-9999
99/99/9999
999.999.999-99

Sim. Máscaras servem para padronizar os campos de input dos formulários, tornando assim seus formulários mais profissionais e garantindo uma maior integridade dos dados fornecidos ao sistema.

Atenção! Formatar o campo não significa que você esteja validando seu preenchimento – são etapas distintas.

O javascript mascarado

Não vamos reinventar a roda, se alguém já criou um bom “plugin” de máscaras em javascript, tudo que precisamos fazer é encontrar e adaptar.

Por isso vamos usar o código do projeto MaskedInput disponível em: https://github.com/bjartekv/MaskedInput

Faça o download do arquivo maskedinput.js para o diretório:

skin > frontend > default > default > js > maskedinput.js

Com isso você acabou de “instalar” o plugin no seu tema.

Problema de versão

Esse plugin foi escrito usando prototype, o mesmo framework utilizado pelo Magento. Porém, ele funciona com prototype 1.6.1.0 (ou superior). E o Magento até a versão CE 1.5.x vem com prototype 1.6.0.3 – ou seja, inferior.

Para verificar sua versão do prototype abra o arquivo:

js > prototype > prototype.js

Logo no início do arquivo possui a informação de versão, algo como:

Version: '1.6.0.3',

Para atualizar é simples, basta fazer uma cópia do arquivo prototype.js de uma versão mais recente do Magento, ou então acessar o site oficial do framework e baixar a versão mais recente: http://prototypejs.org/download/

Preparando as telas

Nem todas as páginas do seu site possuem um formulário de cadastro. E nem todo formulário exige o uso de máscaras para padronizar os campos.

Por isso vamos carregar o arquivo maskedinput.js apenas quando for necessário, evitando assim sobrecarregar páginas que não fazem uso de máscaras. Para isso crie (ou edite) o arquivo local.xml que fica em:

app > design > frontend > default > default > layout > local.xml

Agora basta indicar as telas que precisam carregar o javascript, e usar a dica do post: Como adicionar javascript ao código. Temos então:



    
        
        
            skin_jsjs/maskedinput.js
        
    

Nesse exemplo estamos solicitando que seja carregado o arquivo maskedinput.js na tela customer_account_create, ou seja, na página de cadastro de clientes (nova conta).

O mesmo pode ser feito para qualquer outra tela do sistema, basta adicionar sua referência dentro das tags de layout.

Com que máscara eu vou?

Com toda estrutura pronta, basta escolhermos o campo e informar o tipo de máscara que iremos utilizar.

Como eu optei por carregar o formulário de cadastro de novo usuário, vou usar o campo CPF como exemplo – que no Magento é chamado de “taxvat“. Então vamos editar o arquivo:

app > design > frontend > base > default > template > customer > widget > taxvat.phtml

Não altere arquivos em base/default, faça uma cópia para default/default ou para o seu template/tema customizado.

Quer saber como encontrar os arquivos phtml’s corretos? Use a dica do post: Qual arquivo alterar? Debug.

Agora basta você usar o código em javascript no formato:

new MaskedInput('#nome-do-input', 'formato-da-mascara-aqui');

Neste exemplo então teremos no final do arquivo:

//<![CDATA[
    new MaskedInput('#getFieldId('taxvat')?>', '999.999.999-99');
//]]>

Perceba que estou passando o ID do input da mesma forma como ele é carregado na tela (dinâmicamente), e ao lado o formato da máscara de CPF.

Basta salvar, atualizar o cache do sistema e do navegador.

Outras referências

É interessante ver como outras pessoas estão fazendo para inserir máscaras no Magento. Assim você abre o seu leque de opções e pode decidir qual solução é mais adequada ao seu projeto.

Colocando máscara de DDD no telefoneMagentoBR

Máscara de CEP e módulo matrix ratePrimeiros Passos Magento

Caso queira validar os campos CPF e CNPJ de forma segura (server-side) leia os posts: Validar CPF em Server-Side e Validar CNPJ em Server-Side.

Dúvidas? Use o fórum da Escola Magento.

Sucesso!