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

error.email is not a function

Minha validação do campo de emails não está funcionando. Ao invés disso, a validação que está aparecendo é a do navegador:

captura de tela mostrando o projeto da aula em execução no Mozilla Firefox

Minha validações estão assim:

        validate={values => {
                const errors = {}
                
                if (!values.nome) {
                    errors.nome = 'Campo obrigatório'
                }
                
                if (!values.confirmarSenha) {
                    errors.confirmarSenha = 'Campo obrigatório'
                } else if (values.senha != values.confirmarSenha) {
                    errors.confirmarSenha = 'As senhas não conferem'
                }

                if (!values.telefone) {
                    errors.telefone = 'Campo obrigatório'
                } else if (!/^\d{10,11}$/i.test(values.telefone)) {
                    errors.telefone('Número de telefone inválido')
                }

                if (!values.email) {
                    errors.email = 'Campo obrigatório'
                } else if (!/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/i.test(values.email)) {
                    errors.email('Email inválido')
                }

                return errors
            }}

Meu projeto está em: https://github.com/RenanSantos7/Freelando-react-formik

2 respostas
solução!

Olá!

Com base no código da aula me parece que o problema que você está enfrentando ocorre porque você está tentando chamar errors.email como uma função, mas errors.email deve ser uma string com a mensagem de erro.

Vamos corrigir isso:

validate={values => {
    const errors = {}
    
    if (!values.nome) {
        errors.nome = 'Campo obrigatório'
    }
    
    if (!values.confirmarSenha) {
        errors.confirmarSenha = 'Campo obrigatório'
    } else if (values.senha !== values.confirmarSenha) {
        errors.confirmarSenha = 'As senhas não conferem'
    }

    if (!values.telefone) {
        errors.telefone = 'Campo obrigatório'
    } else if (!/^\d{10,11}$/i.test(values.telefone)) {
        errors.telefone = 'Número de telefone inválido' // Aqui estava o erro
    }

    if (!values.email) {
        errors.email = 'Campo obrigatório'
    } else if (!/^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/i.test(values.email)) {
        errors.email = 'Email inválido' // Aqui estava o erro
    }

    return errors
}}

Note que em errors.telefone e errors.email, você estava tentando chamar uma função (errors.telefone('Número de telefone inválido') e errors.email('Email inválido')), mas você deve atribuir uma string diretamente (errors.telefone = 'Número de telefone inválido' e errors.email = 'Email inválido').

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!

Obrigado!