CEP automático e máscaras para campos de formulário no Elementor
Neste tutorial você vai aprender como puxar o endereço de forma automática quando o usuário preencher o CEP no seu formulário do site – e também como adicionar máscaras nos campos de CEP, telefone, RG ou CPF, por exemplo.
Fiz o tutorial utilizando WordPress junto do plugin Elementor, mas os scripts e a idea em geral vale para qualquer tipo site que permita adicionar códigos customizados.
O vídeo abaixo mostra o conteúdo deste tutorial de forma simples e rápida.
Todo código utilizado no tutorial está disponível abaixo para facilitar a implementação.
Eu sempre tinha que relembrar o processo quando precisava implementar essa solução nos formulários dos meus clientes.
Agora, resolvi documentar para ter um lugar fácil de encontrar como faz.
Espero poder te ajudar também a aprender algo novo.
Então vamos lá!
Código jQuery completo para CEP automático e máscaras para campos de formulário
O código completo do tutorial em vídeo acima está descrito abaixo:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
<script type="text/javascript" >
jQuery(document).ready(function( $ ) {
function limpa_formulario_cep() {
$("#form-field-endereco").val("");
$("#form-field-cidade").val("");
$("#form-field-estado").val("");
}
$("#form-field-cep").blur(function() {
var cep = $(this).val().replace(/\D/g, '');
if (cep != "") {
var validacep = /^[0-9]{8}$/;
if(validacep.test(cep)) {
$("#form-field-endereco").val("...");
$("#form-field-cidade").val("...");
$("#form-field-estado").val("...");
$.getJSON("//viacep.com.br/ws/"+ cep +"/json/?callback=?", function(dados) {
if (!("erro" in dados)) {
$("#form-field-endereco").val(dados.logradouro);
$("#form-field-cidade").val(dados.localidade);
$("#form-field-estado").val(dados.uf);
}
else {
limpa_formulario_cep();
alert("CEP não encontrado.");
}
});
}
else {
limpa_formulario_cep();
alert("Formato de CEP inválido.");
}
}
else {
limpa_formulario_cep();
}
});
$("#form-field-celular").mask("(99) 99999-9999");
$("#form-field-rg").mask("00.000.000-*");
$("#form-field-cpf").mask("000.000.000-**");
$("#form-field-cep").mask("00000-000");
});
</script>
Code language: HTML, XML (xml)
Como funciona o CEP automático?
Para conseguir dados como o endereço, bairro, cidade e estado a partir de um CEP é necessário utilizar um webservice para puxar as informações de um banco de dados externo.
Isso é feito com o ViaCEP. Ele é um serviço gratuito e de confiança para consultar Códigos de Endereçamento Postal (CEP) do Brasil inteiro.
No tutorial foi utilizado apenas a consulta da rua, cidade e estado. Caso você precise puxar o bairro também adicione o seguinte código adicional para atualizar o campo bairro do formulário com o valor da consulta.
$("#bairro").val(dados.bairro);
Code language: JavaScript (javascript)
Siga o mesmo padrão das outras variáveis para adicionar todos os campos necessários para o termo bairro.
Como funcionam as máscaras nos campos do formulário?
O Igor Escobar criou um plugin de jQuery para facilitar a vida dos web designers e adicionar as máscaras nos campos de formulário de forma simples e rápida.
O plugin é gratuito e conta com uma documentação completa – caso precise de máscaras customizadas ou avançadas em seu projeto. Acesse a documentação aqui.
Para que você não precise baixar o plugin e fazer o upload dele em seu servidor, o site CDNJS hospeda o plugin para você – só é necessário ativar ele com a seguinte linha de código:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
Code language: HTML, XML (xml)
Exemplos de casos avançados de máscaras
Vamos supor que você quer criar uma máscara para o campo de data disponível em seu formulário. Para evitar que o usuário coloque uma data não existente (por exemplo: 32/02/2019) você pode criar padrões customizados para diferentes variáveis.
$("#form-field-data").mask("19/29/3299", {
translation: {
'1': {pattern: /[0-3]/},
'2': {pattern: /[0-1]/},
'3': {pattern: /[2]/},
}
});
Code language: JavaScript (javascript)
A variável 1 limita o campo em números de 0–3.
A variável 2 limita o campo em números de 0–1.
A variável 3 permite apenas o número 2.
O número 9 não tem padrão específico, então permite os números de 0–9.
Agora, vamos supor que você quer criar uma máscara para o campo de horas. O primeiro dígito poderá ser o número 0, 1 ou 2 (00:00 às 24:00).
$("#form-field-hora").mask("19:29", {
translation: {
'1': {pattern: /[0-2]/},
'2': {pattern: /[0-5]/},
}
});
Code language: JavaScript (javascript)
Conclusão
O que você achou do CEP automático? E das máscaras para campos de formulário no Elementor?
É um detalhe fácil de implementar em todos os seus projetos e que agrega valor à experiência do usuário.
Você conseguiu fazer funcionar em seu site? Tem alguma dúvida no meio do processo? Deixe seu comentário abaixo.
Gostou desse tutorial? Dê seu feedback nos comentários para incentivar novos tutoriais como esse.
Obrigado por me acompanhar até aqui!
Abraço!
Comentários
Vim só agradecer, pq você resolveu meu problema! Sucesso
André achei perfeito essa integração com formulário do Elementor! Só ficou uma dúvida. Existem RG com numero e com letra, como eu poderia deixar esse campo?
$(“#form-field-rg”).mask(“00.000.000-**”);
Imaginei que * entrarei tanto numero como letra.
Obrigado
-
André deu certo!
Muito obrigado por compartilhar com nós essa informação e obrigado pela sua atenção em me responder. Abraço
Opa, André! Parabéns pelo conteúdo, me ajudou muito. Estou com a seguinte dificuldade: preciso validar que o campo “nome” validado apenas com letras e acentos, e que o campo “telefone” seja validado conforme máscara. No código atual, se você colocar um “espaço” o formulário é enviado. Já campo “nome” se eu colocar “*” o formulário é enviado também.
Antes de mais nada, agradeço pelo excelente guia, e parabéns pelo seu trabalho!
Gostaria de tirar uma dúvida se possível.
Fiz exatamente como no tutorial mas não funciona, analisei o console do modo desenvolvedor do chrome e está retornando o seguinte erro:
?page_id=2821&preview=true:345 Uncaught SyntaxError: Invalid regular expression: /^{8}$/: Nothing to repeat
at HTMLInputElement. (?page_id=2821&preview=true:345)
at HTMLInputElement.dispatch (jquery.min.js?ver=3.5.1:2)
at HTMLInputElement.v.handle (jquery.min.js?ver=3.5.1:2)
O erro é referente a linha:
var validacep = /^[0-9]{8}$/;
Como posso resolver?
olá! esse plugin não existe mais. o wordpress não o aceita.
Bom dia!
Como faço para utilizar telefones com 8 ou 9 dígitos?
No seu exemplo é só para 9 dígitos.
Uso o wp forms ele não me dá opção de renomear os “Id” cada campo vem com um respectivo número. Como que faço pra adequar a esse código?
Obrigado pela dica.
Deu super certo!
Fantástico parabéns este tutorial foi uma mão na roda, mas eu não consegui colocar o bairro mesmo acrescentando a linha $(“#bairro”).val(dados.bairro);. Podia colocar um código com esta linha aí pra nós
Muito bom o tutorial! recentemente desenvolvi um plugin para autocompletar ceps utilizando também jQuery e o ViaCEP super flexível e com menos de 1,7kb. Segue o link https://github.com/vsilva472/jquery-viacep
-
Não tá funcionando mais, dá falha na instalação do plugin, sabe me informar outro que tem a função de ativar o script? Gratidão.
Excelente tutorial Andre! Me ajudou muito no meu formulário, outra cara e funcionalidade!! Obrigado por compartilhar! =)
Rapaz, vou testar aqui, mas já gostei.
Caí aqui de paraquedas, procurando outa coisa.
Ola como faço pra utilizar esse script no woocommerce pode explicar passo a passo?
É possível adicionar esse script no Woocommerce, se sim, como?
Oi, boa noite… excelente dica… está de parabéns…
Me diz uma coisa, quando testei aqui em dispositivo android – usando o chrome mesmo, nem a mascara e nem o busca cep funcionou. Tentei até instalar o plugin direto, porem dá erro também…
No seu, o formulário esta funcionando em dispositivo mobile?
-
Eu consegui fazer ele buscar o cep, no mobile…. porem as mascaras não funcionou no Samsung S7 e nem no Moto G.
Vc sabe como utilizar o código de a viacep disponibiliza em javascript para podermos utilizar no formulário do elementor….
Acredito que seja melhor estou testando uma mascara que peguei na internet em java e esta perfeito, onde e para digitar somente letras é somente letras ou numeros…. porem esta em javascript e gostaria de colocar a perquisa de cep tambem em java…
Não estou conseguindo instalar o plugin.
Colei o Código html e o Cep preenche somente os 5 primeiros numero e apaga.
por favor me ajude assim que possivel
Amigo, perfeito. Funcionou de primeira, sem erros. Se possível, me tira uma dúvida? Em um campo de texto simples, como eu faria pra aceitar apenas letras e não números? Tentei de várias de formas e não consegui fazer isso funcionar de jeito nenhum… agradeço!!!