fonk-formik

This package serves as the entry point to the Formik Form state management library (Live example). It is intended to be paired with the generic Fonk package, which is shipped as to npm.

Check our Fonk Documentation site and Formik section.

Adding Fonk to Formik allows you to seamlessly add validation capabilities to Formik.

In order to use Fonk with Formik you will have to install fonk-formik adaptor:

npm install @lemoncode/fonk @lemoncode/fonk-formik --save

The main change to apply when using a fonk-formik comes when you want to instantiate Fonk engine with your form validation schema, instead of calling createFormValidation , just replace that entry with createFormikValidation

- import { createFormValidation, Validators } from '@lemoncode/fonk';
+ import { Validators } from '@lemoncode/fonk';
+ import { createFormikValidation } from '@lemoncode/fonk-formik';

const validationSchema = {
  field: {
    email: [Validators.required.validator],
    password: [Validators.required.validator]
  }
};

- export const formValidation = createFormValidation(validationSchema);
+ export const formValidation = createFormikValidation(validationSchema);

Now you can hook to Formik form validation (example):

    <Formik
      initialValues={{ email: "", password: "" }}
+     validate={values => formValidation.validateForm(values)}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >

And if you want to hook to Formik field validations (example):

  <form onSubmit={handleSubmit}>
    <Field
      name="email"
+     validate={(value) => formValidation.validateField("email", value)} />

Example: How to display field validation error message:

    <Field name="email"/>
+    {errors &&
+      errors.email &&
+       touched.email &&
+       <div>{errors.email}</div>}

Examples:

Basic example

Using formik Field

Firing validations at field level

Asynchronous validation

Customizing validator's error messages globaly

Customizing validator's error messages just for a given form

Creating custom validators

Validating nested fields

Defining record validations

About Basefactor + Lemoncode

We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.

Basefactor, consultancy by Lemoncode provides consultancy and coaching services.

Lemoncode provides training services.

For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend