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

Cannot set property validity of #<HTMLInputElement> which has only a getter

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Quando eu tento imprimir a mensagem no console.log aparece esse erro:

script.js

import ehUmCPF from "./validaCPF.js";
import maiorDeIdade from "./validaIdade.js";

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

camposDoFormulario.forEach((campo) => {
    campo.addEventListener("blur", () => verificaCampo(campo));
    campo.addEventListener("invalid", () => evento.preventDefault());
})

const errosDeMensagem = [
    'valueMissing',
    'patternMismatch',
    'tooShort',
    'typeMismatch',
    '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 = "";
    if (campo.name == "cpf" && campo.value.length >= 11) {
        ehUmCPF(campo);
    }
    if (campo.name == "aniversario" && campo.value != ""){
        maiorDeIdade(campo);
    }
    errosDeMensagem.forEach(erro => {
        if  (campo.validity = [erro]){
            mensagem = mensagens[campo.name][erro];
            console.log(mensagem);
        }
    })
}

validaCPF.js

export default function ehUmCPF (campo) {
    const cpf = campo.value.replace(/\.|-/g, "");
    if(validaNumerosRepetidos(cpf) || validarPrimeiroDigito(cpf) || validarSegundoDigito(cpf)){
        console.log("CPF Inexistente!!!")
    } else {
        console.log("CPF Confimado!!!")
    }
}

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

        return numerosRepetidos.includes(cpf);
}

function validarPrimeiroDigito (cpf){
    let soma = 0;
    let multiplicacao = 10;

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

    soma = (soma * 10) % 11;

    if(soma == 10 || soma == 11){
        soma = 0;
    }

    return soma != cpf[9];
}

function validarSegundoDigito (cpf){
    let soma = 0;
    let multiplicacao = 11;

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

    soma = (soma * 10) % 11;

    if(soma == 10 || soma == 11){
        soma = 0;
    }

    return soma != cpf[10];
}

validaIdade.js

export default function maiorDeIdade (campo){
    const dataDeNascimento = new Date(campo.value);
    validaIdade(dataDeNascimento);
    console.log(validaIdade(dataDeNascimento));
}

function validaIdade (data){
    const dataAtual = new Date();
    const dataMais18 = new Date(data.getUTCFullYear() + 18, data.getUTCMonth(), data.getUTCDate())

    return dataAtual >= dataMais18;
}
2 respostas
solução!

Olá, Nicholas! Como vai?

Analisando seu código, aparentemente o erro está na linha onde você está tentando atribuir um valor à propriedade validity do campo. No seu código, você tem:

if  (campo.validity = [erro]){
    mensagem = mensagens[campo.name][erro];
    console.log(mensagem);
}

A propriedade validity é somente leitura, o que significa que você não pode atribuir um valor a ela diretamente. Além disso, você está usando o operador de atribuição (=) em vez do operador de comparação (== ou ===).

Acredito que o que você queria fazer é verificar se o campo tem um determinado erro de validação assim como o código da instrutura. Para isso, você poderia usar o seguinte código:

if  (campo.validity[erro]){
    mensagem = mensagens[campo.name][erro];
    console.log(mensagem);
}

Acho que dessa forma vai funcionar como esperado, mas caso tenha novos erros, fico à disposição!

Espero ter ajudado e reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!

Sucesso

Um grande abraço e até mais!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!

Nossa, eu tinha revisado bastante o código ontem e não tinha reparado que o erro era no "=", você tirou minha dúvida na hora certa pois eu vou agora finalizar esse curso depois (assim espero), muito obrigado!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software