Input validation error message displaying before the user inputs anything

Question

Im tasked with fixing this issue on a sign in page form where the input camps displays an error message "camp required" as soon as you open the sign in page. The coder used yup and useForm, i supose that the issue is that the "initialValues" for the form already break yup's validation rules, heres how the code looks.

const esquema = yup.object().shape({
        nome: yup.string().required("Campo obrigatório"),
        email: yup
            .string()
            .matches(/\..{2,}$/, "E-mail inválido")
            .email("E-mail inválido")
            .required("Campo obrigatório"),
        telefone: yup
            .string()
            .test("Telefone valido", "Telefone inválido", (value) => validatePhone(value))
            .required("Campo obrigatório"),
        senha: yup
            .string()
            .matches(/(?=.*[-@$!%*?&._#])[-@$!%*?&._#]/, "A senha deve ter caracteres especiais")
            .matches(/(?=.*[0-9])[0-9]/, "A senha deve ter números")
            .matches(/(?=.*[A-Z])[A-Z]/, "A senha deve ter letras maiúsculas")
            .matches(/(?=.*[a-z])[a-z]/, "A senha deve ter letras minúsuculas")
            .max(64, "A senha não deve ultrapassar 64 caracteres")
            .min(8, "A senha deve ter no mínimo 8 caracteres")
            .required("Campo obrigatório"),
)}

const { erros, trocarValor, valores, setValor, temErro } = useForm({
        valoresIniciais: {
            categoriaMaquina: "",
            dataInicio: "",
            duracao: 0,
            precisaOperador: false,
            precisaCombustivel: false,
            documentosNecessarios: "",

            endereco: "",
            cep: "",
            estado: "",
            cidade: "",
            numero: "",
            complemento: "",
            ibge: 0,

            nome: "",
            email: "",
            cpf: "",
            telefone: "",
            senha: "",
            confirmarSenha: "",
            arquivos: [],
        },
        esquema: esquema,
    });

Answer 1

It seems that the problem you're encountering is a result of the valoresIniciais object's initial values not meeting the validation criteria established by the yup schema. Consequently, error messages are appearing even before the user inputs any data.

To resolve this issue, you should ensure that the initial values supplied in valoresIniciais comply with the validation standards specified in the yup schema. To illustrate, here's an example of how you can adjust the initial values to satisfy the validation criteria.

const { erros, trocarValor, valores, setValor, temErro } = useForm({
  valoresIniciais: {
    categoriaMaquina: "",
    dataInicio: "",
    duracao: 0,
    precisaOperador: false,
    precisaCombustivel: false,
    documentosNecessarios: "",
    endereco: "",
    cep: "",
    estado: "",
    cidade: "",
    numero: "",
    complemento: "",
    ibge: 0,
    nome: "",
    email: "",
    cpf: "",
    telefone: "",
    senha: "",
    confirmarSenha: "",
    arquivos: [],
  },
  esquema: esquema,
});

When filling out the required fields (such as name, email, phone number, password, etc.), ensure that they contain valid values or are non-empty strings based on the validation rules. This will ensure that error messages are only shown when the user inputs invalid information.

To eliminate the error message that appears upon opening the sign-in page, simply update the initial values to valid ones.