So I have form, where I would love to have password validation, with 3 conditions that need to be met. But as I have read, you can show user only 1 error condition at the time, is there a way, to show all 3 validation conditions on the screen at the same time using Formik and Yup?
An example is from Formik documentation,
const SignupSchema = Yup.object().shape({
name: Yup.string()
.min(2, 'Too Short!')
.max(70, 'Too Long!')
.required('Required'),
});
export const ValidationSchemaExample = () => (
<div>
<h1>Signup</h1>
<Formik
initialValues={{
name: '',
}}
validationSchema={SignupSchema}
onSubmit={values => {
console.log(values);
}}
>
{({ errors }) => (
<Form>
<Field name="name" />
- {errors.name ? (
- <div>{errors.name}</div>
- ) : null}
+ <ErrorMessage name="name" />
<button type="submit">Submit</button>
</Form>
)}
</Formik>
</div>
Example in picture (error messages would be different):
