javascript - How to show error messages in react yup form validations without formik - Stack Overflow

admin管理员组

文章数量:1414614

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 ?

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 ?

• javascript
• reactjs
• formik
• yup

Share Improve this question Follow asked Sep 10, 2022 at 8:52 Abhishek PoddarAbhishek Poddar 33922 gold badges77 silver badges1616 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

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.

本文标签： javascriptHow to show error messages in react yup form validations without formikStack Overflow