<form action="/api/cadastro" method="POST" class="wzw-modern-form">
    <!-- Campo de Nome Obrigatório com Tamanho Mínimo -->
    <div class="form-group">
        <label for="nome">Nome Completo *</label>
        <input 
            type="text" 
            id="nome" 
            name="nome" 
            required 
            minlength="3" 
            maxlength="80"
            placeholder="Ex: Ana Maria Silva"
            autocomplete="name">
    </div>
 
    <!-- Campo de E-mail com Validação Sintática Nativa -->
    <div class="form-group">
        <label for="email">E-mail Profissional *</label>
        <input 
            type="email" 
            id="email" 
            name="email" 
            required 
            placeholder="[email protected]"
            autocomplete="email">
    </div>
 
    <!-- Campo de CPF com Regex no Atributo pattern -->
    <div class="form-group">
        <label for="cpf">CPF (somente números ou formatado) *</label>
        <input 
            type="text" 
            id="cpf" 
            name="cpf" 
            required
            pattern="\d{3}\.?\d{3}\.?\d{3}-?\d{2}"
            title="Digite um CPF válido no formato 000.000.000-00 ou 11 números."
            placeholder="000.000.000-00"
            inputmode="numeric">
    </div>
 
    <!-- Campo de Data com Limites Históricos -->
    <div class="form-group">
        <label for="nascimento">Data de Nascimento *</label>
        <input 
            type="date" 
            id="nascimento" 
            name="nascimento" 
            required 
            min="1920-01-01" 
            max="2008-01-01">
        <small class="help-text">Idade mínima permitida: 18 anos.</small>
    </div>
 
    <!-- Ações do Formulário -->
    <div class="form-actions">
        <button type="submit" class="btn-primary">Finalizar Cadastro</button>
        <button type="submit" name="acao" value="rascunho" formnovalidate class="btn-secondary">
            Salvar Rascunho
        </button>
    </div>
</form>

/* Destaca campos obrigatórios com asterisco ou cor sutil */
input:required {
    border-left: 3px solid #3b82f6;
}
 
/* ⚠️ ATENÇÃO: :invalid puro aplica erro imediatamente ao carregar a página */
/* Prefira a pseudo-classe moderna :user-invalid (suportada em todos os navegadores atuais) */
input:user-invalid,
select:user-invalid,
textarea:user-invalid {
    border-color: #ef4444;
    background-color: #fef2f2;
}
 
/* Quando o usuário preenche corretamente */
input:user-valid {
    border-color: #10b981;
}
 
/* Exibe a mensagem de ajuda ou erro associada */
input:user-invalid + .error-message {
    display: block;
    color: #ef4444;
    font-size: 0.85rem;
    margin-top: 4px;
}

const campoCpf = document.querySelector('#cpf');
 
// 1. Verifica se o campo cumpre todas as regras declaradas
if (!campoCpf.checkValidity()) {
    console.log('Motivo da falha:', campoCpf.validity);
}
 
// 2. Personaliza a mensagem de erro do navegador
campoCpf.addEventListener('input', () => {
    if (campoCpf.validity.patternMismatch) {
        campoCpf.setCustomValidity('Por favor, informe os 11 dígitos do seu CPF.');
    } else {
        // Obrigatório limpar a mensagem vazia para o campo voltar a ser válido!
        campoCpf.setCustomValidity('');
    }
});
 
// 3. Força a exibição do balão de erro nativo programaticamente
// campoCpf.reportValidity();