3
votes

I need to validate Dynamically created fields with formik or yup .I have seen this validation done by in jquery validatioh here

like this to this to this

My code in here https://codesandbox.io/s/hidden-haze-47k73?file=/src/demo.js

How do i achieve this using formik and yup

1
Can you explain what you do to create fields dynamically? FieldArray or what ? Can you show minimum code for it?aturan23
Please wait i will updateDev
I have updated my code link .I'm working on your answerDev

1 Answers

3
votes

If you using formik FieldArray. You can check it's fields with yup:

firends: Yup.array().of(
    Yup.object().shape({
       name: Yup.string().required('Name is required'),
       email: Yup.string()
                .email("Invalid email")
                .required('Email is required'),
    })
),

And your FieldArray will be:

<FieldArray                                                          
 name="firends"
 render={(arrayHelpers) => {
  {values.firends && values.firends.length > 0 ? (
     values.firends.map((friend, index) => (
    <div key={index}>
      <Field
         className="form-control"
         name={`friends.${index}.name`}
         placeholder="name"
         type="text"
      />
        {errors &&
         errors.friends &&
         errors.friends[index] &&
         errors.friends[index].name &&
           (touched &&
            touched.friends &&
            touched.friends[index] &&
            touched.friends[index].name) && (
              <div className="field-error">
                {errors.friends[index].name}
              </div>
      )}
     <Field
         className="form-control"
         name={`friends.${index}.email`}
         placeholder="email"
         type="text"
      />
        {errors &&
         errors.friends &&
         errors.friends[index] &&
         errors.friends[index].email &&
           (touched &&
            touched.friends &&
            touched.friends[index] &&
            touched.friends[index].email) && (
              <div className="field-error">
                {errors.friends[index].email}
              </div>
      )}
  </div>
  ))
 }}

You can find fully ready code here