How to show error messages in react yup form validations without formik

Question

I am very new to YUP library . I am trying to validate my form using yup.

export const userLogin = yup.object({
    email:yup.string().email("Enter valid Email").required("This field is Required"),
    password:yup.string().min(5).max(12).required(),
}) 

   const data = {
     email:"[email protected]",
     password:"password"
   }



  userLogin.isValid(data)
   .then((response) =>{
      console.log(response) //true
  })

Now I am tying to get the error messages which I have mentioned in my schema. how can I get it ?

Answer 1

You can use validate function of yup library instead of isValid function like:

userLogin
  .validate(data, { abortEarly: false })
  .then((responseData) => {
    console.log("no validation errors");
    console.log(responseData);
    setCurrentErrors([]);
})
  .catch((err) => {
    console.log(err);
    console.log(err.name); // ValidationError
    console.log(err.errors);
    setCurrentErrors(err.errors);
});

You can take a look at this StackBlitz for a live working example.