JSFiddle - React, Tailwind, and code Playground

by Thiago Diniz

HTML

<input type="text" id="cep">
<button id="enviar">Enviar</button>

<div id="state"></div>

JavaScript

function clearForm() {
    // Limpa valores do formulário de cep.
    $('#cep').val('');
};

//Quando o campo cep perde o foco.
$('#cep').blur(function() {

    //Nova variável 'cep' somente com dígitos.
    var cep = $(this).val().replace(/\D/g, '');

    //Verifica se campo cep possui valor informado.
    if (cep != '') {

        //Expressão regular para validar o CEP.
        var validCep = /^[0-9]{8}$/;

        //Valida o formato do CEP.
        if (validCep.test(cep)) {

            $('#state').text('Carregando');

            //Consulta o webservice viacep.com.br/
            $.getJSON('//viacep.com.br/ws/' + cep + '/json/?callback=?', function(dados) {

                if (!('erro' in dados)) {
                    //Atualiza os campos com os valores da consulta.						
                    $('#state').text(dados.uf)
                } //end if.
                else {
                    //CEP pesquisado não foi encontrado.
                    clearForm();
					$('#state').text('');
                    alert('CEP não encontrado.');
                }
            });
        } //end if.
        else {
            //cep é inválido.
            clearForm();
			$('#state').text('');
            alert('Formato de CEP inválido.');
        }
    } //end if.
    else {
        //cep sem valor, limpa formulário.
		$('#state').text('');
        clearForm();
    }
});