gem-hunter

Formik Validation Adaptors

Installation

npm i formik-validation-adaptors

Live Demo

Features

Usage

Zod Adaptor

import { formikZodValidator } from "formik-validation-adaptors";
import { z } from "zod";
import { Formik, Form, Field } from "formik";

const schema = z.object({
  name: z.string().min(1, "Name is required"),
  email: z.string().email("Invalid email"),
});

const initialValues = {
  name: "",
  email: "",
};

const FormikValidationWithZod = () => (
  <Formik
    initialValues={initialValues}
    validate={formikZodValidator(schema)}
    onSubmit={(values) => console.log(values)}
  >
    {({ errors }) => (
      <Form>
        <Field name="name" />
        {errors.name && <div>{errors.name}</div>}
        <Field name="email" />
        {errors.email && <div>{errors.email}</div>}
        <br />
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);

export default FormikValidationWithZod;

Joi Adaptor

import { formikJoiValidator } from "formik-validation-adaptors";
import Joi from "joi";
import { Formik, Form, Field } from "formik";

const schema = Joi.object({
  name: Joi.string().required().messages({
    "string.empty": "Name is required",
  }),
  email: Joi.string()
    .email({ tlds: { allow: false } })
    .required()
    .messages({
      "string.email": "Invalid email",
      "string.empty": "Email is required",
    }),
});

const initialValues = {
  name: "",
  email: "",
};

const FormikValidationWithJoi = () => (
  <Formik
    initialValues={initialValues}
    validate={formikJoiValidator(schema)}
    onSubmit={(values) => console.log(values)}
  >
    {({ errors }) => (
      <Form>
        <Field name="name" />
        {errors.name && <div>{errors.name}</div>}
        <Field name="email" />
        {errors.email && <div>{errors.email}</div>}
        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);

export default FormikValidationWithJoi;

Vest Adaptor

import { formikVestValidator } from "formik-validation-adaptors";
import { create, test, enforce } from "vest";
import { Formik, Form, Field } from "formik";

// Define a Vest validation suite
const suite = create((data) => {
  test("name", "Name is required", () => {
    enforce(data.name).isNotEmpty();
  });

  test("email", "Invalid email format", () => {
    enforce(data.email).matches(/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/);
  });

  test("password", "Password must be at least 6 characters", () => {
    enforce(data.password).longerThanOrEquals(6);
  });
});

const initialValues = {
  name: "",
  email: "",
  password: "",
};

const FormikValidationWithVest = () => (
  <Formik
    initialValues={initialValues}
    validate={formikVestValidator(suite)}
    onSubmit={(values) => console.log(values)}
  >
    {({ errors }) => (
      <Form>
        <Field name="name" placeholder="Name" />
        {errors.name && <div>{errors.name}</div>}

        <Field name="email" placeholder="Email" />
        {errors.email && <div>{errors.email}</div>}

        <Field name="password" type="password" placeholder="Password" />
        {errors.password && <div>{errors.password}</div>}

        <button type="submit">Submit</button>
      </Form>
    )}
  </Formik>
);

export default FormikValidationWithVest;

Why Use This Package?

Author