Formik FieldArray Validation not Validating

Question

Im using Formik FormArray object and trying to use the validation does not seem to be working.

Even with a simple required validation keeps allowing empty fields to be submitted
When I add the regular expressions it throws errors
I don't know if the error messages show
Its hard to debug

Here is snippets of my sample form (sorry its not the full code but its all in parent containers) :

    const validationSchema = Yup.object().shape({

      domains: Yup.array()
        .required('Required')
        .matches(/^(?!:\/\/)([a-zA-Z0-9-_]+\.)*[a-zA-Z0-9][a-zA-Z0-9-_]+\.[a-zA-Z]{2,11}?$/, {
          message: 'Invalid Domain',
          excludeEmptyString: true,
        })
        .matches(/(www\.| http: \/\/|https:\/\/)/, {
          message: 'Should not contain www.| http:&#47;&#47; | https:&#47;&#47;',
          excludeEmptyString: true,
        })
    })

    const ErrorMessage = ({ name }) => (
      <Field
        name={name}
        render={({ form }) => {
          const error = getIn(form.errors, name)
          const touch = getIn(form.touched, name)
          return touch && error ? error : null
        }}
      />
    )

    {
      ({ handleChange, handleBlur, values, errors, touched }) => (
        <FormGroup>

          <Label>Domains</Label>

          <FieldArray
            name="domains"
            render={arrayHelpers => (
              <>
                <ul className="list-unstyled">
                  {values.domains.map((domain, index, domains) => (
                    <li className="mb-2" key={index}>
                      <InputGroup>
                        <Field
                          name={`domains[${index}]`}
                          className="form-control"
                        />
                        <InputGroupAddon addonType="append">
                          <Button
                            color="primary"
                            onClick={() => arrayHelpers.remove(index)}
                          >
                            <strong>x</strong>
                          </Button>
                        </InputGroupAddon>
                        <ErrorMessage name={`domains[${index}]`} />
                      </InputGroup>
                    </li>
                  ))}
                  <Button
                    className="mt-2"
                    color="secondary"
                    onClick={() => arrayHelpers.push('')}
                  >
                    Add a Domain
                              </Button>
                </ul>
              </>
            )}
          />

        </FormGroup>

I've tried to remove the regex validation and that didn't work. Could anyone recommend how to do this? Thanks

you need to pass the validationSchema as props to formik else formik has no idea it has to validate. Check jaredpalmer.com/formik/docs/guides/validation — cdoshi
As mentioned I didn't display the entire code some was in a parent container. Its working on other components just not for FieldArray: <Formik initialValues={initialValues} validationSchema={validationSchema} onSubmit={values => (isEdit ? editForm(values) : createItem(values))} > — David Pell
github.com/jaredpalmer/formik/issues/784 There are certain issues regarding FieldArray — Imdadul Huq Naim

David Pell David Pell · Accepted Answer · 2019-09-27T16:38:37

https://jaredpalmer.com/formik/docs/api/fieldarray

The example on the formik site sites for an array of objects:

    const schema = Yup.object().shape({
      domains: Yup.array()
        .of(
          Yup.object().shape({
            name: Yup.string()
              .min(4, 'too short')
              .required('Required'), // these constraints take precedence

For accessing an array of strings:

       domains: Yup.array().of(
         Yup.string()
         .trim()
         .required('Required')

Formik FieldArray Validation not Validating

2 Answers