Formik: Field#validate not running on form submit

[stefanwille]

Bug, Feature, or Question?

Bug

Current Behavior

I have a form with fields email and password and a submit button. Both fields are added as <Field> with a validate property.

If I submit the form without focusing any of the fields, the functions in validate are never run and I don't see an error message.

I have to focus one of the fields to see an error message.

Please see https://codesandbox.io/s/107rvl2vxj

Desired Behavior

The functions in validate should run before form submission.

Suggested Solutions

Additional Information

---

• Formik Version: 0.11.11
• React Version: 16.2.0
• TypeScript Version: -
• CodeSandbox Link: https://codesandbox.io/s/107rvl2vxj
• OS: MacOS
• Node Version: 8.9.4
• Package Manager and Version: yarn 1.5.1

[goislimat]

If you add a valid check in your button I think you'll get the desired behavior.

(Also, you have to add isValid in your used props)

<button type="submit" disabled={isSubmitting || !isValid}>
      Submit
</button>

[stefanwille]

Thank you for your comment. Disabling the submit button only hides the problem, it doesn't fix it.

[jaredpalmer]

Have a fix for this as well that will work for this and for fast field.

[lookfirst]

@jaredpalmer I'm seeing this as well. Digging into the code, I just noticed this kind of separate issue... the !! comparisons are not the same, is that correct? https://github.com/jaredpalmer/formik/blob/master/src/Field.tsx#L117 !== https://github.com/jaredpalmer/formik/blob/master/src/Field.tsx#L125

[dewey92]

is there any updates on this?

[stefanwille]

Thanks

[jaredpalmer]

Deployed in latest beta. Let me know how it goes. I'm surprised more ppl didn't speak up about this sooner