[Dúvida] Não entendi o setCustomValidity()

Olá, Thaynara! Tudo bem contigo?

Vou tentar te ajudar a entender melhor sobre o uso do método setCustomValidity() e o que é o customError.

O método setCustomValidity() é utilizado para definir uma mensagem de erro personalizada para um campo de formulário. Ele recebe como parâmetro a mensagem que você deseja exibir. No seu exemplo, você está utilizando esse método para definir mensagens de erro personalizadas para os campos de CPF e data de nascimento.

Por exemplo, no arquivo valida-idade.js, você tem o seguinte trecho de código:

if (!validaIdade(dataNascimento)) {
    campo.setCustomValidity('O usuário não é maior de idade')
}

Nesse caso, se a função validaIdade() retornar false, ou seja, se a pessoa não for maior de idade, o método setCustomValidity() é chamado e define a mensagem de erro como "O usuário não é maior de idade".

Da mesma forma, no arquivo valida-cpf.js, você tem o seguinte trecho de código:

if (validaNumerosRepetidos(cpf) || validaPrimeiroDigito(cpf) || validaSegundoDigito(cpf)) {
    campo.setCustomValidity('Esse CPF não é válido.')
}

Nesse caso, se alguma das funções validaNumerosRepetidos(), validaPrimeiroDigito() ou validaSegundoDigito() retornar true, ou seja, se o CPF não for válido, o método setCustomValidity() é chamado e define a mensagem de erro como "Esse CPF não é válido".

O customError é uma propriedade que indica se um campo de formulário possui um erro personalizado. Ele retorna true se o campo tiver uma mensagem de erro personalizada definida pelo método setCustomValidity(), e false caso contrário.

No seu código, você utiliza o customError para verificar se um campo possui um erro personalizado e exibir a mensagem de erro na tela. Por exemplo, no trecho de código que você mostrou:

const mensagemErro = campo.parentNode.querySelector('.mensagem-erro')
const validadorDeInput = campo.checkValidity()

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

Você verifica se o campo não é válido utilizando o método checkValidity(). Se o campo não for válido, ou seja, se tiver algum erro, você exibe a mensagem de erro na tela, que está armazenada na variável mensagem. Caso contrário, você deixa o campo sem mensagem de erro.

Espero ter esclarecido suas dúvidas! Se tiver mais alguma pergunta, é só me dizer.

Espero ter ajudado e bons estudos!

Muito obrigada pela explicação! Consegui entender bem o código com o que você explicou, mas agora fiquei com uma ultima dúvida: a mensagem personalizada que colocamos no customError através do setCustomValidity(),(isso aqui: campo.setCustomValidity('Esse CPF não é válido.')) , essa menssagem ela some? Ela só foi usada para mudar o valor do customError de true para false?

Oi Thaynara! Tudo ok por aí?

Peço desculpas pela demora em obter um retorno!

Fico feliz em saber que você conseguiu entender melhor o assunto com as explicações anteriores!

Respondendo à sua última dúvida: Sim, a mensagem personalizada que é definida através do setCustomValidity() fica associada ao campo de formulário apenas temporariamente. Ela é utilizada para mudar o valor do customError de true para false, como você mencionou.

Quando o método setCustomValidity() é chamado com uma mensagem de erro, ele define o valor do customError para true, indicando que o campo possui um erro personalizado. Essa mensagem fica visível até que o valor do customError seja alterado de volta para false.

No seu código, quando você faz essa verificação:

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

Você está verificando se o campo não é válido (ou seja, possui algum erro). Se for o caso, a mensagem personalizada, que foi definida anteriormente pelo setCustomValidity(), será exibida na tela. Caso contrário, se o campo for válido, você atribui um conteúdo vazio à mensagem de erro, fazendo com que ela não seja mais exibida.

Portanto, a mensagem personalizada definida através do setCustomValidity() não persiste após a validação do campo, ela é utilizada apenas temporariamente para indicar a presença de um erro específico.

Aqui estão alguns links que podem ajudar a entender melhor o assunto sobre o setCustomValidity() e o uso de mensagens de erro personalizadas em campos de formulário:

1. MDN Web Docs - Validating forms using JavaScript: https://developer.mozilla.org/pt-BR/docs/Learn/Forms/Form_validation

2. MDN Web Docs - Constraint validation: https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation

3. HTML Living Standard - Form validation: https://html.spec.whatwg.org/multipage/forms.html#the-constraint-validation-api

4. MDN Web Docs - HTMLFormElement.setCustomValidity(): https://developer.mozilla.org/pt-BR/search?q=setCustomValidity

Esses recursos são da Mozilla Developer Network (MDN) e do HTML Living Standard e são fontes confiáveis e extremamente detalhadas para entender mais sobre validação de formulários em JavaScript e o uso do setCustomValidity().

Espero que esses links sejam úteis para a sua aluna e contribuam para o seu entendimento sobre o assunto.

Espero ter ajudado a esclarecer essa dúvida! Se tiver mais perguntas, estou à disposição.

Abraços e bons estudos!

Muito obrigada pela explicação e pelos links! Vou da uma olhadinha neles e praticar mais esse assunto