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:

<?xml version="1.0"?>
<!--
New customer registration
-->
<layout>
<customer_account_create translate="label">
<label>Customer Account Registration Form</label>
<reference name="head">
<action method="addItem"><type>skin_js</type><name>js/maskedinput.js</name></action>
</reference>
</customer_account_create>
</layout>

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:

<script type="text/javascript">
//<![CDATA[
 new MaskedInput('#<?php echo $this->getFieldId('taxvat')?>', '999.999.999-99');
//]]>
</script>

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 telefone – MagentoBR

Máscara de CEP e módulo matrix rate – Primeiros 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!

2017-01-24T20:25:11+00:00

RECEBA DICAS VALIOSAS NO SEU EMAIL

x