Oii Anastasiia, tudo bem?
O método setCustomValidity
é usado para definir uma mensagem de validação personalizada em um campo de formulário. No caso do código que você mencionou:
campo.setCustomValidity('Esse cpf não é valido');
Essa linha está definindo uma mensagem personalizada de erro para quando a validação do CPF falhar. No entanto, você mencionou que essa mensagem não está aparecendo e, em vez disso, está aparecendo uma mensagem de uma constante mensagens
.
Isso acontece porque, no código do curso, a mensagem de erro que é realmente exibida para o usuário é definida no seguinte trecho de código:
tiposDeErro.forEach(erro => {
if (campo.validity[erro]) {
mensagem = mensagens[campo.name][erro];
console.log(mensagem);
}
})
Aqui, a mensagem de erro é obtida da constante mensagens
com base no nome do campo e no tipo de erro.
Agora, você pode estar se perguntando: "Então, por que precisamos do setCustomValidity
se a mensagem não é usada?".
Bem, o setCustomValidity
faz mais do que apenas definir uma mensagem de erro. Ele também marca o campo de formulário como inválido. Isso significa que, se você tentar enviar o formulário, o navegador não permitirá enquanto o campo estiver inválido. Além disso, o método checkValidity
retornará false
para esse campo.
Então, mesmo que a mensagem definida com setCustomValidity
não seja exibida diretamente, ela ainda está afetando a validação do campo de formulário.
Espero ter ajudado e bons estudos!