How to enable validation on visited fields in Formik

We can make form validation of our own with custom hook, but there is a good library for that already, Formik.

Formik provide useForm hook for implementing the validation into our regular form.

Visited field

In input fields in a form get validated using onChange handler provided by the hook, for visited fields Fomik provides onBlur handler.

   const formik = useFormik({
    initialValues: {
      email: '',
      name: '',
      password: 'foobar',
      cid: '',
      lid: ''
    },
    validate,
  onSubmit: (values) => {

In the form field we can use handler as

 <TextField
                    
                    onBlur={formik.handleBlur}
                    
                    error={formik.touched.name && Boolean(formik.errors.name)}
                    helperText={formik.touched.name && formik.errors.name}
                    autoFocus
                  />

Integrating Formik with Form and Mui so easy, isn’t it? Follow posts may help you learn more on the go.

• Zustand, a minimal store for Rreactjs
• How to use styles in Remix
• Integrate Hygraph with Svelte, React, Vue
• How to build a blog using Tailwind + Graphql + Nextjs
• Lit web components
• Quilljs mention snippet
• react-editor-js double instance fix
• React-quill double instance fix
• Create a Material-UI Rich Text Editor in React
• Create minimal editor with Tiptap in React