Tempo de leitura: 4 minutos
Se você faz uso do Plugin Elementor e quer melhorar a experiência do usuário quando preencher o formulário do seu site, buscando formas de automatizar certos preenchimentos de cadastros. Sem dúvida a busca automática por CEP é um dos carregamentos dinâmicos de maior utilidade em cadastros.
Essa forma de carregamento evita as digitações erradas dos campos e tão mais integridade aos dados que podem vir a ser usados como Endereço, Cidade e Estado (UF), pois serão preenchidos automaticamente após ser informado o CEP.
Além da busca automática pelo CEP, vou disponibilizar umas dicas de como adicionar máscaras nos campos como:
- CEP
- CPF
- CNPJ
- RG
- Telefone
Como falei anteriormente, fiz a utilização com o plugin Elementor no WordPress, mas os scripts e o contexto geral são úteis em qualquer tipo de site que permitam implementar códigos customizados.
Todo o código que utilizei está disponível abaixo para facilitar a implementação.
E o intuito é ajudar todos que estão procuram dicas e soluções praticas de fácil entendimento.
Então, vamos nessa!
Código jQuery completo para CEP automático e máscaras para campos de formulário
O código completo 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-telefone").mask("(99) 9999-9999");
$("#form-field-rg").mask("00.000.000-00");
$("#form-field-cpf").mask("000.000.000-00");
$("#form-field-cep").mask("00000-000");
});
</script>Como funciona o CEP automático?
É necessário utilizar um webservice para implementar as informações do banco de dados externo para conseguir dados como o Endereço, Estado, Cidade e Bairro a partir de um CEP.
O ViaCEP, talvez seja o mais famoso repositório público para preenchimento de CEP (sem a necessidade de uma integração com os Correios).
Todas nossas informações vieram do ViaCEP. Que é um serviço gratuito e confiável para consultar CEP (Códigos de Endereçamento Postal) do Brasil inteiro.
No código que utilizamos não consta a consulta do Bairro. Caso você precise puxar o Bairro, acrescente o seguinte código para adicionar o campo Bairro do formulário com o valor da consulta.
$("#bairro").val(dados.bairro);Siga exatamente o mesmo padrão das outras variáveis para adicionar os demais campos necessários para o termo bairro.
Como funcionam as máscaras nos campos do formulário?
As máscaras de formulário criam um controle personalizado na guia avançada de campo para personalizar seus campos com máscaras. Segue alguns modelos de máscaras abaixo:
$("#form-field-cnpj").mask("00.000.000/0000-00");
$("#form-field-celular").mask("(99) 99999-9999");
$("#form-field-date").mask("00/00/0000");
$("#form-field-time").mask("00:00:00");
$("#form-field-date_time").mask("00/00/0000 00:00:00");
$("#form-field-dinheiro").mask("#.##0,00", {reverse: true});
$("#form-field-dinheiro2").mask("000.000.000.000.000,00", {reverse: true});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]/},
}
});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]/},
}
});Por fim, o que você achou do CEP automático e das máscaras para campos de formulário no Elementor?
“Com certeza irá agregar muito valor à experiência do usuário ao preencher o formulário, com esse pequeno detalhe tão simples de ser implementado em todos os seus projetos.”
Você conseguiu fazer funcionar em seu site?
Gostou dessas dicas?
Dê seu feedback no comentários e compartilhe para que esse conteúdo chegue a outros.
Espero que esse conteúdo tenha te ajudado!
Até o próximo post…
Forte abraços,
João Rodrigues