question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Field-level validation not working when using `useField` hook

See original GitHub issue

🐛 Bug report

Current Behavior

When using the useField hook, field-level validation using the validate property doesn’t work.

const [field] = useField({ name, validate: () => 'not good' });

Expected behavior

The validate prop should work just like its Field counterpart.

Reproducible example

https://codesandbox.io/embed/formik-codesandbox-template-p5zc1

Suggested solution(s)

Manually registering the validate function does the trick for me:

useEffect(() => {
  registerField(name, {
    validate: () => 'not good'
  });

  return () => unregisterField(name);
}, [name, registerField, unregisterField]);

Your environment

Software Version(s)
Formik 2.0.1-rc.9
React 16.8.6
TypeScript 3.5.2
Browser Chrome 75
npm/Yarn npm
Operating System Ubuntu 19.04

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

5reactions
mordechaimcommented, May 20, 2020

Why is this behavior not documented here?

I ran into this page by searching how to do field-level validation using hooks.

0reactions
johnromcommented, May 20, 2020

@mordechaim you’re free to open a PR to update the documentation

Read more comments on GitHub >

github_iconTop Results From Across the Web

React Formik Tutorial - 25 - Field Level Validation - YouTube
Courses - https://learn.codevolution.dev/ Support UPI - https://support.codevolution.dev/ Support PayPal ...
Read more >
useField() - Formik
A custom React Hook that returns a 3-tuple (an array with three elements) containing FieldProps , FieldMetaProps and FieldHelperProps . It accepts either...
Read more >
useField() hook - Formiz
This will update the isValidating state at the field level and also at the form and step levels. Notify the start of async...
Read more >
Final Form Docs – `useField()`
useField () returns FieldRenderProps . It will manage the rerendering of any component you use it in, i.e. the component will only rerender...
Read more >
MUI & Formik: Validation doesn't trigger for useField
I just reproduced based on the working example what you provided and realized that you set helpers.setTouched manually.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found