Skip to content

jQuery para Consulta AJAX do CEP nos Correios com preenchimento automático dos campos do formulário.

Notifications You must be signed in to change notification settings

webmaniabr/jQuery-CEP-Correios

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

29 Commits
 
 
 
 
 
 

Repository files navigation

jQuery CEP Correios

Utilize o jQuery da Webmania® para consultas Ajax nos Correios com preenchimento automático do formulário.

Requisitos

Obtenha as credenciais de acesso grátis e de uso ilimitado da sua aplicação. Acesse: https://webmaniabr.com/docs/rest-api-correios/#autenticacao

Utilização

Primeiro, adicione o jQuery e o javascript dos Correios antes da tag </body>:

<script src="jquery.js"></script>
<script src="jquery.correios.min.js"></script>

Em seguida, inicie o javascript informando as suas credenciais de acesso e os campos do formulário para o preenchimento automático:

jQuery(function($){
    correios.init( 'app_key', 'app_secret' );
    $('cep').correios( 'endereco', 'bairro', 'cidade', 'uf', 'loading', true, 'numero', 'ibge', 'trigger_error', 'trigger_success');
});
  • app_key: Informe o app_key da sua aplicação dos Correios.
  • app_secret: Informe o app_secret da sua aplicação dos Correios.
  • cep: Informe a classe ou id do input CEP. Exemplo: '#cep'
  • endereco: Informe a classe ou id do input Endereço. Exemplo: '#endereco'
  • bairro: Informe a classe ou id do input Bairro. Exemplo: '#bairro'
  • cidade: Informe a classe ou id do input Cidade. Exemplo: '#cidade'
  • uf: Informe a classe ou id do input Estado. Exemplo: '#uf'
  • loading: Informe a classe ou id da Imagem. Exemplo: '#loading'
  • readonly: Realiza o bloqueio dos campos Endereço, Bairro, Cidade e Estado impedindo que o usuário altere as informações preenchidas automaticamente. Deve ser informado o valor boolean (true ou false). Exemplo: true
  • numero: Informe a classe ou id do input Número para receber o foco após a consulta. Exemplo: '#numero'
  • ibge: Informe a classe ou id do input IBGE. Exemplo: '#ibge'
  • trigger_error: Informe o nome do trigger que será executado caso retorne algum erro na pesquisa do CEP. Exemplo: 'zipcode_not_found'
  • trigger_success: Informe o nome do trigger que será executado ao retornar o CEP . Exemplo: 'zipcode_found'

CSS

Caso utilize a opção readonly, sugerimos adicionar a seguinte CSS para que o usuário identifique os campos bloqueados no Desktop e Smartphone:

input[readonly], input[readyonly=readonly], select[readonly], select[readonly=readonly] {
  background: #efefef !important;
  color: #666666 !important;
  border-color:#dfdcde !important;
  cursor:not-allowed;
}
select[readonly], select[readonly=readonly] {
  pointer-events: none;
  touch-action: none;
}

TRIGGER

Ao retornar um erro na pesquisa do CEP, como CEP não encontrado, é possível utilizar os triggers para mostrar/esconder a mensagem de erro. Segue abaixo exemplo:

// trigger_error
$(document).on('zipcode_not_found', function(){

  $('.zip-error').remove();
  $('form').prepend('<div class="zip-error">CEP não encontrado!</div>');

});

// trigger_success
$(document).on('zipcode_found', function(){

   $('.zip-error').remove();

});

About

jQuery para Consulta AJAX do CEP nos Correios com preenchimento automático dos campos do formulário.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •