Formik: validateField not working

[cyberprodigy]

🐛 Bug report

When calling validateField the field is not validated

Current Behavior

Here is a repository to checkout and click the button labeled "Next Step" which is supposed to validate field "email"
https://github.com/cyberprodigy/formik-single-field-validation-bug

Expected behavior

When the method validateField is called it should display that the field is required

Reproducible example

Checkout https://github.com/cyberprodigy/formik-single-field-validation-bug
execute `npm start``
Observe that no validation is happening

Suggested solution(s)

It should display the error when validateField is invoked. You can trigger focus() followed by blur() to obtain the desired behaviour, but that is not a solution

Additional context

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| Formik | 1.5.8
| React | 16.9.0
| TypeScript |
| Browser |
| npm/Yarn |
| Operating System | Mac Mojave

[jamesmosier]

I think you just need a name="email" on your input.

[cyberprodigy]

name="email"

I added the name="email" to the input and pushed to the repo but it's the same behaviour. https://github.com/cyberprodigy/formik-single-field-validation-bug

[johnrom]

@cyberprodigy I turned this into a sandbox for you, used the Field and Form components provided by formik, and I'm still receiving an error after clicking that button. Maybe there's an issue with validateField when there is no validate function on a field? I don't use validationSchema so it's possible I just hooked it up wrong.

Errors looks like this: { email: TypeError }

https://codesandbox.io/s/formik-single-field-validation-bug-ixsb7

[jamesmosier]

Looks like if there is no validate function on a field, it just calls Promise.resolve() https://github.com/jaredpalmer/formik/blob/master/src/Formik.tsx#L426

Also the full TypeError is "_this.fields[field].props.validate is not a function"

[jamesmosier]

Oops, I was looking at the v2 source with my comment above.

This is the 1.5.8 source line in question: https://github.com/jaredpalmer/formik/blob/version-1.5.8/src/Formik.tsx#L166

And you'll see that calls runSingleFieldLevelValidation which expects a validate function on the field. Therefore this is a bug with 1.5.8 when using validationSchema and validateField.

[johnrom]

@jaredpalmer do you think we should fix this for v2?

[jamesmosier]

v2 uses different logic for the validateField function, so I’m not sure this issue will persist past v1.x

[johnrom]

I thought it just called Promise.resolve() currently in v2?

[jamesmosier]

Oh sorry, I misunderstood @johnrom. Yes, v2 is only calling Promise.resolve() for validationSchema based forms. So that should be fixed for v2.

[johnrom]

FYI the fix appears to be something like this: https://github.com/jquense/yup/issues/102

[jamesmosier]

Good find @johnrom! I'll give this fix a try on the v2 branch this weekend.

[j-evs]

I wanted to do a programmatic validation on a single field (nested object inside of an array) using validationSchema and set/clear field errors based on validation result.

yup.reach(schema, 'path.to.field').validate(fieldValue) was throwing an error:
Uncaught TypeError: Cannot read property 'resolve' of undefined

I ended up with this handler as a workaround:

const handleFinishEdit = (viewValue) => {
  props.form.setFieldValue(fieldName, viewValue)

  // use lodash/set because props.form.values are stale
  const updatedFormValues = set(
    props.form.values,
    fieldName,
    viewValue
  )

  yourYupSchema
     // Don't forget to add context if you use it
    .validateAt(fieldName, updatedFormValues, {context: updatedFormValues })
    .then(() => props.form.setFieldError(fieldName, null))
    .catch(err => props.form.setFieldError(fieldName, err.message)
  }

Hope that helps someone with a similar issue:)

P.S. this should not be treated as a substitute for an actual formik validation, see:
https://github.com/jaredpalmer/formik/issues/1278#issuecomment-461036355
https://github.com/jaredpalmer/formik/issues/1309

[mhuggins]

I'm seeing the same error as @j-evs when using validationSchema. Would love to see a fix in formik.

[mhuggins]

The biggest difficulty with the workaround offered above my comment is that it requires the yup schema to be passed around everywhere that field validation is needed, as it's not readily available from the FormikContext. This wasn't previously needed.

[dineshrsharma]

Hello team Formik, @jamesmosier @johnrom

I noticed that field level validation validate={[required, email]} is not working. However, validate={required} works fine.
This could be the same reason hence posted here instead of creating a new one.

Any workaround for this until the fix is released?

[mr-newell]

Also running into this in a form with a validationSchema but no validate.

[jamesmosier]

If you could create a codesandbox example that'd be helpful to fully understanding the issue.