Yup and field-level validation

[Creaa]

Is it possible? In Formik docs we can read only about field validate by function.

My case: I receive form data from response and I cannot predict what fields will appear. So I would like to make a presets based on Yup library, but there is problem. ValidationSchema can be implemented on form initialization only, right?

I've tried to make field level validation, where each field gonna trigger function and get proper schema. But it doesn't work, props validate doesn't react on my Yup object.

Is there any way to update schema's outside withFormik at the beginning?

Thanks.

[sk-akiyama]

I wanna know this too!

[Creaa]

I've found some workaround to this case. Sadly, I didn't use Yup to validate my form generated by API response. So I've had to use validation by function. Each field has a 'validation' object and it contain a regex pattern.

There is example of field level validation: https://jaredpalmer.com/formik/docs/guides/validation

You need pass additional parameter (regex pattern, flags, error message) to function, so I binded to it. Like below:

const customValidator = (data, value) => {
//data is my binded argument - regex patterns, flags etc
// value is argument provided by formik with form value

  let {errorMessage, pattern, flags} = data;
  const regexpPattern = new RegExp(pattern, flags);
  let error;

  if (!regexpPattern.test(value)) {
    error = errorMessage;
  }
  return error;
}

Next I passed this validation schema to formik FastField component.

   <FastField
      key={key}
      name={name}
      validate={customValidation ? customValidator.bind(null, customValidation) : null}
      fieldValue={fieldValue}
      ...
    />

So everytime I map through my fields I can pass my own validation. The disadvantage of this solution is fact, that I have to assign pattern to each field.

I hope, that it will help someone.

[yekver]

Any updates on this? It's very helpful to have a field-level yup validation which will extend Form level validationSchema.