Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Por favor, preencha um CPF válido. (patternMismatch:)

Estou tendo esté problema na validação do CPF relacionada ao pattern. Infelizmente não estou conseguindo progredir com o curso por estar trancado neste erro. Por favor me ajudem: (OBS: Meus patterns estão os mesmos da professora.)

script.js:

import ehUmCPF from "./valida-cpf.js";
import ehMaiorDeIdade from "./valida-idade.js";

const camposDoFormulario = document.querySelectorAll("[required]");

camposDoFormulario.forEach(campo => {
    campo.addEventListener("blur", () => { verificaCampo(campo) })
    campo.addEventListener("invalid", evento => evento.preventDefault());
});// pq n assim?: "blur", verificaCampo(campo) 

const tiposDeErro = [
    'valueMissing',
    'typeMismatch',
    'patternMismatch',
    'tooShort',
    'customError'
]

const mensagens = {
    nome: {
        valueMissing: "O campo de nome não pode estar vazio.",
        patternMismatch: "Por favor, preencha um nome válido.",
        tooShort: "Por favor, preencha um nome válido."
    },
    email: {
        valueMissing: "O campo de e-mail não pode estar vazio.",
        typeMismatch: "Por favor, preencha um email válido.",
        tooShort: "Por favor, preencha um e-mail válido."
    },
    rg: {
        valueMissing: "O campo de RG não pode estar vazio.",
        patternMismatch: "Por favor, preencha um RG válido.",
        tooShort: "O campo de RG não tem caractéres suficientes."
    },
    cpf: {
        valueMissing: 'O campo de CPF não pode estar vazio.',
        patternMismatch: "Por favor, preencha um CPF válido.",
        customError: "O CPF digitado não existe.",
        tooShort: "O campo de CPF não tem caractéres suficientes."
    },
    aniversario: {
        valueMissing: 'O campo de data de nascimento não pode estar vazio.',
        customError: 'Você deve ser maior que 18 anos para se cadastrar.'
    },
    termos: {
        valueMissing: 'Você deve aceitar nossos termos antes de continuar.',
    }
}

function verificaCampo(campo) {
    let mensagem = "";
    campo.setCustomValidity('');
    if (campo.name == "cpf" && campo.value.length >= 11) {
        ehUmCPF(campo);
    };
    if (campo.name == "aniversario" && campo.value != "") {
        ehMaiorDeIdade(campo);
    }
    tiposDeErro.forEach(erro => {
        if (campo.validity[erro]) {
            mensagem = mensagens[campo.name][erro];
            console.log(mensagem);
        }
    });
    const mensagemErro = campo.parentNode.querySelector('.mensagem-erro');//<span/>
    const validadorDeInput = campo.checkValidity();

    if (!validadorDeInput) {
        mensagemErro.textContent = mensagem;
    } else {
        mensagemErro.textContent = "";
    };
};

valida-cpf.js ------------------------------------------------------------------------------------------------------------------------------------------

export default function ehUmCPF(campo) {
    const cpf = campo.value.replace(/\.|-/g, "");
    if (validaNumerosRepetidos(cpf) || validaPrimeiroDigito(cpf) || validaSegundoDigito(cpf)) {
        campo.setCustomValidity("Esse CPF não é válido.")
    }
}

function validaNumerosRepetidos(cpf) {
    const numerosRepetidos = [
        '00000000000',
        '11111111111',
        '22222222222',
        '33333333333',
        '44444444444',
        '55555555555',
        '66666666666',
        '77777777777',
        '88888888888',
        '99999999999'
    ]

    return numerosRepetidos.includes(cpf);
}

function validaPrimeiroDigito(cpf) {//???
    let soma = 0;
    let multiplicador = 10;

    for (let tamanho = 0; tamanho < 9; tamanho++) {
        soma = soma + cpf[tamanho] * multiplicador;
        multiplicador--;
    }

    soma = (soma * 10) % 11;

    if (soma == 10 || soma == 11) {
        soma = 0;
    }
    return soma != cpf[9];

}

function validaSegundoDigito(cpf) {
    let soma = 0;
    let multiplicador = 11;

    for (let tamanho = 0; tamanho < 10; tamanho++) {
        soma = soma + cpf[tamanho] * multiplicador;
        multiplicador--;
    }

    soma = (soma * 10) % 11;

    if (soma == 10 || soma == 11) {
        soma = 0;
    }
    return soma != cpf[10];// ? !=

}
3 respostas

Olá Lucas! Tudo bem?

Pelo que entendi, você está tendo problemas na validação do CPF relacionada ao pattern. Uma possível solução para esse problema seria verificar se o valor do campo de CPF tem pelo menos 11 caracteres, já que esse é o tamanho mínimo de um CPF válido. Você pode adicionar essa verificação no arquivo script.js, dentro da função verificaCampo, logo após a verificação do nome do campo. Ficaria assim:

if (campo.name == "cpf" && campo.value.length >= 11) {
    ehUmCPF(campo);
};

Dessa forma, a validação do CPF só será realizada se o campo tiver pelo menos 11 caracteres.

Espero ter ajudado e bons estudos!

solução!

Boa noite Renan, achei o problema. Na verdade era relacionado ao HTML mesmo:

<fieldset class="formulario__campo">
                    <label class="campo__etiqueta" for="cpf">CPF (apenas números)</label>
                    <input name="cpf" id="cpf" class="campo__escrita campo__escrita--menor" required type="text"
                        minlength="11" maxlength="14" pattern="\d{3}.?\d{3}.?\d{3}-?\d{2}" />
                    <span class="mensagem-erro"></span>
                </fieldset>

O \d{3}.?\d{3}.?\d{3}-?\d{2} estava \d{3}.?\d{3}.?\d{3}-?d{2} sem a barra após o ? antes do d.

Opa, Ai sim. Que bom que conseguiu resolver! Valeu pelo retorno :)