Field level validation dependent on other fields.

🚀 Feature request

Current Behavior

<Field validate={(fieldValue) => ... } /> For now field level validaiton funciton gives us only field value.

Desired Behavior

<Field validate={(fieldValue, formikBag) => ... } /> I want to have access to formikBag inside of field level validation.

Suggested Solution

Pass additional argument with formikBag to validate callback function.

Who does this impact? Who is this for?

I want to have possibility to access other formik values to create dependent validation. E.g. I have Field1 and Field2. Field2 should be invalid if Field1 is true and Field2 have some values inside. Form is reused and you can compound it from smallest reuseable pieces. It means sometimes you can have Field2 defined or undefined, that is why I don’t want to use for this case global <Formik validation method.

Describe alternatives you’ve considered

1. Global Formik validation method - no, bcs of -> I want to see validation on component Blur, and want to compound form from smallest Fields element that can be included or not dynamically.

2. Field Field nesting just to have form values inside of second Field validation

<FIeld>
{
({form}) => <FIeld validate={value => form.values.FIELD1} > ...</Field>
}
</Field>

No. Just have a look at this. Unnecessary component just to retrieve values I should have access to.

[zveljkovic]

Any news on this?

[tonypine]

I successfully managed to get my validation to work with a little hack:

  const { validateField, values } = useFormikContext();
  const fieldValue1 = values?.fieldValue1;
  const fieldValue2 = values?.fieldValue2;

  const validate = useCallback(
    value => {
      // validation logic
    },
    [fieldValue1, fieldValue2]
  );
  ...
  const [field, meta, helpers] = useField({
    name: fieldName,
    validate
  });
  useEffect(() => {
    const timeoutId = setTimeout(() => validateField(fieldName), 50);
    return () => clearTimeout(timeoutId);
  }, [fieldName, validate, validateField]);

By the time the validate method of invoked by formik, the other field’s values weren’t propagated yet to the component updating the validate method, but with this useEffect I re-invoke the validation of the field once, and it did the trick.

Is it a hack? Yes. Does it work? Yes.