Heurísticas de Nielsen aplicadas a fluxos de coleta e validação de CPF

const statusMessages = {
    idle: '',
    typing: 'Digitando...',
    validating: 'Validando digitos...',
    loading: 'Consultando CPF...',
    success: 'CPF verificado com sucesso!',
    error: 'Erro na consulta. Tente novamente.'
};

function updateStatus(status) {
    const el = document.getElementById('statusIndicator');
    el.textContent = statusMessages[status];
    el.className = `status status-${status}`;

    // Feedback visual no input
    const input = document.getElementById('cpfInput');
    input.setAttribute('aria-busy', status === 'loading' ? 'true' : 'false');
}

function getErrorMessage(errorType) {
    const messages = {
    incomplete: 'Faltam alguns numeros. O CPF tem 11 digitos.',
    invalid_check: 'O CPF parece incorreto. Confira os numeros digitados.',
    not_found: 'Nao encontramos esse CPF. Verifique e tente novamente.',
    timeout: 'A verificacao esta demorando. Tente novamente em instantes.',
    network: 'Parece que voce esta sem internet. Verifique sua conexao.'
    };
    return messages[errorType] || 'Algo deu errado. Tente novamente.';
}

<div class="cpf-confirmado" id="cpfConfirmado" style="display: none;">
    <span class="cpf-valor" id="cpfValor"></span>
    <span class="cpf-nome" id="cpfNome"></span>
    <button class="btn-alterar" onclick="permitirEdicao()">Alterar</button>
</div>

<script>
    function permitirEdicao() {
    document.getElementById('cpfConfirmado').style.display = 'none';
    const input = document.getElementById('cpfInput');
    input.style.display = 'block';
    input.removeAttribute('readonly');
    input.focus();
    input.select(); // Seleciona todo o texto para facilitar edicao
    }
</script>

/* Design tokens para consistencia */
:root {
    --cpf-label: 'CPF';
    --cpf-placeholder: '000.000.000-00';
    --cpf-input-padding: 12px 16px;
    --cpf-input-font-size: 1rem;
    --cpf-input-border-radius: 8px;
    --cpf-valid-color: #10b981;
    --cpf-invalid-color: #ef4444;
    --cpf-focus-color: #3b82f6;
}

function setupCPFInput(inputElement) {
    inputElement.setAttribute('inputmode', 'numeric');
    inputElement.setAttribute('maxlength', '14');
    inputElement.setAttribute('autocomplete', 'off');

    inputElement.addEventListener('input', function (e) {
    // Remover tudo que nao e digito e aplicar mascara
    const digits = this.value.replace(/\D/g, '').slice(0, 11);
    let masked = '';
    for (let i = 0; i < digits.length; i++) {
    if (i === 3 || i === 6) masked += '.';
    if (i === 9) masked += '-';
    masked += digits[i];
    }
    this.value = masked;
    });

    // Prevenir colagem de texto nao numerico
    inputElement.addEventListener('paste', function (e) {
    e.preventDefault();
    const pasted = (e.clipboardData || window.clipboardData).getData('text');
    const digits = pasted.replace(/\D/g, '').slice(0, 11);
    this.value = '';
    // Simular digitacao para aplicar mascara
    const event = new Event('input', { bubbles: true });
    this.value = digits;
    this.dispatchEvent(event);
    });
}

<div class="campo-cpf">
    <label for="cpf">CPF</label>
    <input
    type="text"
    id="cpf"
    inputmode="numeric"
    placeholder="000.000.000-00"
    maxlength="14"
    />
    <p class="dica">11 digitos, sem pontos ou tracos -- a formatacao e automatica.</p>
</div>

<style>
    .dica {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 4px;
    }
</style>

function setupAccelerators(inputElement, nextFieldId) {
    inputElement.addEventListener('input', function () {
    const digits = this.value.replace(/\D/g, '');

    // Auto-advance: quando 11 digitos sao preenchidos, mover para proximo campo
    if (digits.length === 11 && validarCPF(digits)) {
    const nextField = document.getElementById(nextFieldId);
    if (nextField) {
    setTimeout(() => nextField.focus(), 150);
    }
    }
    });

    // Suporte a Ctrl+V / Cmd+V com qualquer formato
    inputElement.addEventListener('paste', function (e) {
    e.preventDefault();
    const texto = (e.clipboardData || window.clipboardData).getData('text');
    const digits = texto.replace(/\D/g, '').slice(0, 11);
    this.value = maskCPF(digits);
    this.dispatchEvent(new Event('input', { bubbles: true }));
    });
}

<div class="tipo-documento">
    <button class="tab active" data-tipo="cpf" onclick="selecionarTipo('cpf')">
    Pessoa Fisica (CPF)
    </button>
    <button class="tab" data-tipo="cnpj" onclick="selecionarTipo('cnpj')">
    Pessoa Juridica (CNPJ)
    </button>
</div>

<div id="campoCPF" class="campo-documento">
    <input type="text" inputmode="numeric" placeholder="000.000.000-00" maxlength="14" />
</div>

<div id="campoCNPJ" class="campo-documento" style="display: none;">
    <input type="text" inputmode="numeric" placeholder="00.000.000/0000-00" maxlength="18" />
</div>

<script>
    function selecionarTipo(tipo) {
    document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
    document.querySelector(`[data-tipo="${tipo}"]`).classList.add('active');
    document.getElementById('campoCPF').style.display = tipo === 'cpf' ? 'block' : 'none';
    document.getElementById('campoCNPJ').style.display = tipo === 'cnpj' ? 'block' : 'none';
    }
</script>

function exibirErroEspecifico(tipo, input) {
    const erros = {
    poucos_digitos: {
    msg: `Faltam ${11 - input.replace(/\D/g, '').length} digito(s). O CPF tem 11 numeros.`,
    acao: 'Complete os digitos que faltam.'
    },
    digito_verificador: {
    msg: 'Os dois ultimos numeros do CPF estao incorretos.',
    acao: 'Confira o CPF no seu documento e tente novamente.'
    },
    todos_iguais: {
    msg: 'Um CPF com todos os digitos iguais nao e valido.',
    acao: 'Digite o CPF correto do seu documento.'
    },
    nao_encontrado: {
    msg: 'Esse CPF nao foi encontrado na base de dados.',
    acao: 'Verifique se digitou corretamente ou preencha os dados manualmente.'
    }
    };

    const erro = erros[tipo];
    if (!erro) return;

    const feedbackEl = document.getElementById('cpfFeedback');
    feedbackEl.innerHTML = `
    <strong>${erro.msg}</strong><br/>
    <span class="sugestao">${erro.acao}</span>
    `;
    feedbackEl.className = 'feedback erro';
}

<div class="campo-cpf">
    <label for="cpf">
    CPF
    <button class="tooltip-trigger" aria-label="Ajuda sobre CPF" onclick="toggleTooltip()">
    ?
    </button>
    </label>
    <input type="text" id="cpf" inputmode="numeric" placeholder="000.000.000-00" maxlength="14" />
    <div class="tooltip" id="tooltip" style="display: none;">
    <p><strong>Por que pedimos seu CPF?</strong></p>
    <p>Usamos o CPF para emissao de nota fiscal e para preencher seus dados
    automaticamente, agilizando o cadastro.</p>
    <p><strong>Onde encontro meu CPF?</strong></p>
    <p>O CPF aparece no cartao CPF, no RG, na CNH ou no app Gov.br.</p>
    <p class="seguranca">Seus dados sao protegidos pela LGPD e trafegam
    criptografados.</p>
    </div>
</div>

<style>
    .tooltip-trigger {
    width: 20px; height: 20px;
    border-radius: 50%;
    border: 1px solid #999;
    background: transparent;
    color: #666;
    font-size: 0.75rem;
    cursor: pointer;
    margin-left: 4px;
    vertical-align: middle;
    }
    .tooltip {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    margin-top: 8px;
    font-size: 0.85rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    .tooltip p { margin-bottom: 8px; }
    .seguranca { color: #10b981; font-size: 0.8rem; }
</style>

<script>
    function toggleTooltip() {
    const tooltip = document.getElementById('tooltip');
    tooltip.style.display = tooltip.style.display === 'none' ? 'block' : 'none';
    }
</script>