Olá, Annie, tudo bem?
Agradeço por compartilhar sua dúvida conosco sobre o problema.
Vou explicar o comportamento observado e apresentar algumas soluções para resolver essa questão.
Ao utilizar o código fornecido no curso, o valor do campo de CPF é capturado e é aplicado um replace para remover os pontos e hifens, deixando apenas os dígitos do CPF. No entanto, quando o campo possui um hifen (-), você observou que o valor não é retornado corretamente pelo console.log, e isso faz com que o valor não seja passado corretamente como parâmetro para as outras funções de validação.
Esse comportamento ocorre porque o atributo "type" do campo de CPF está definido como "number". Quando o atributo "type" é definido como "number", o navegador tenta validar e restringir a entrada para aceitar apenas valores numéricos. Portanto, ao digitar um hifen (-), o navegador não considera esse caractere como válido e não o inclui no valor do campo.
Para solucionar esse problema, existem algumas opções que podemos considerar:
Utilizar um campo de texto com máscara:
Uma solução é alterar o atributo "type" do campo de CPF para "text" e adicionar uma máscara que formate o valor conforme o usuário digita. Dessa forma, o usuário poderá visualizar o hifen enquanto digita, mas ele será removido quando o valor do campo for processado. Existem várias bibliotecas JavaScript, como a "input-mask" (https://github.com/RobinHerbots/Inputmask), que podem ajudar a implementar facilmente máscaras nos campos de texto.
Exemplo de uso da biblioteca "input-mask" no campo de CPF:
<input type="text" id="cpf" data-inputmask="'mask': '999.999.999-99'">
Validar e remover hifens manualmente:
Outra opção é realizar a validação e remoção dos hifens manualmente, sem depender do comportamento do campo de CPF com o atributo "type" definido como "number". Nesse caso, você pode adicionar um evento de escuta (event listener) ao campo de CPF para capturar o valor digitado pelo usuário, remover os hifens e, em seguida, prosseguir com as validações.
Exemplo de código JavaScript para validação e remoção dos hifens:
const cpfInput = document.getElementById('cpf');
cpfInput.addEventListener('input', function() {
const cpf = cpfInput.value.replace(/\.|-/g, '');
// Continue com as validações do CPF
if (validaNumerosRepetidos(cpf) || validaPrimeiroDigito(cpf) || validaSegundoDigito(cpf)) {
console.log('Esse CPF não existe');
} else {
console.log('Esse CPF existe');
}
});
Utilizar um campo de texto e validar o formato do CPF:
Em vez de remover os hifens automaticamente, você pode instruir os usuários a digitarem o CPF sem os hifens, mas permitir que os hifens sejam exibidos no campo de texto. Dessa forma, você pode adicionar uma validação adicional para garantir que o formato do CPF esteja correto antes de realizar as demais validações.
Exemplo de código JavaScript para validar o formato do CPF:
const cpfInput = document.getElementById('cpf');
cpfInput.addEventListener('input', function() {
const cpf = cpfInput.value;
// Verifica se o formato do CPF está correto (11 dígitos numéricos)
if (/^\d{11}$/.test(cpf)) {
// Continue com as validações do CPF
if (validaNumerosRepetidos(cpf) || validaPrimeiroDigito(cpf) || validaSegundoDigito(cpf)) {
console.log('Esse CPF não existe');
} else {
console.log('Esse CPF existe');
}
} else {
console.log('Por favor, digite um CPF válido (sem pontos ou hifens)');
}
});
Essas são algumas opções para resolver o problema!
Cada uma dessas abordagens tem suas próprias vantagens e considerações, portanto, escolha aquela que melhor se adapta às suas necessidades e ao contexto do seu projeto.
Espero que tenha te ajudado a encontrar uma solução adequada para o problema.
Se tiver mais alguma dúvida, sinta-se à vontade para perguntar.
Abraços e Bons estudos!
