Validação de Cartão de Crédito com HTML Puro

1. Introdução

Técnica pouco conhecida para validação básica de números de cartão de crédito diretamente no HTML, sem necessidade de JavaScript (embora JS possa melhorar a formatação).

2. Implementação Básica (HTML Only)

<input type="text"
       inputmode="numeric"
       pattern="[0-9]{13,19}"
       maxlength="19"
       placeholder="1234-5678-9012-3456"
       title="Insira um número do cartão de crédito válido"
       required>

Atributos Chave:

Atributo	Função
`inputmode="numeric"`	Mostra teclado numérico em dispositivos móveis
`pattern="[0-9]{13,19}"`	Regex: aceita apenas números (13-19 dígitos)
`maxlength="19"`	Limita ao comprimento máximo de cartões (19 dígitos)
`title`	Mensagem de erro personalizada quando a validação falha

Demonstração:

3. Melhoria com JavaScript (Formatação Automática)

<script>
// Formata como XXXX-XXXX-XXXX-XXXX durante a digitação
document.querySelector('input').addEventListener('input', e => {
    e.target.value = e.target.value
        .replace(/[^0-9]/g, '')  // Remove caracteres não numéricos
        .replace(/(.{4})/g, '$1-') // Adiciona hífen a cada 4 dígitos
        .trim(); // Remove espaços em branco
});
</script>

Demonstração com Formatação:

4. Limitações e Considerações

Validação básica: Verifica apenas formato, não autenticidade do cartão
Browsers modernos: Funciona melhor em navegadores atualizados
Complemento necessário: Recomendado usar validação adicional no back-end

Nota: Esta técnica oferece uma primeira camada de validação, mas não substitui verificações de segurança completas no back-end.