DaveOdden/zod-password-validation-schema

README

Zod Password Validation Schema

An opinionated, reusable, and adaptable Zod schema that can be used to validate password form fields in the most popular form libraries. See usage notes below for implementation specifics for React Hook Form, Mantine Form, Formik, and React Final Form.

NPM Install:

npm install zod-password-validation-schema

Yarn Install:

yarn add zod-password-validation-schema

Schema Details

Requires two form fields named password and confirmPassword
Password has a min length of 6 characters
Password has at least 1 uppercase character
Password has at least 1 lowercase character
Password has at least 1 number
Password has at least 1 special character (!@#$%^&*()_-+={[}]|:;"'<,>.)

Universal Requirement

Once installed via npm or yarn, import dependency into your component

import { customZodSchema } from "zod-password-validation-schema"

React Hook Form

Install react-hook-form (if not already) along side the react-hook-form zod resolver

yarn add react-hook-form @hookform/resolvers/zod

Import these dependencies in the same component you imported the schema

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"

Supply the schema to react-hook-form's useForm hook, including default values

const { control, handleSubmit } = useForm({
  defaultValues: {
    password: "",
    confirmPassword: "",
  },
  resolver: zodResolver(customZodSchema),
})

React-hook-form requires a control={control} prop to be added to your form fields

<PasswordInput
  name="confirmPassword"
  label="Confirm password"
  control={control}
/>

Mantine

Install Mantine form (if not already) along side the Mantine form zod resolver

yarn add @mantine/form mantine-form-zod-resolver

Import these dependencies in the same component you imported the schema

import { useForm } from "@mantine/form"
import { zodResolver } from "mantine-form-zod-resolver"

Supply the schema to Mantine's useForm hook, including initial values

const form =
  useForm <
  z.infer <
  typeof customZodSchema >>
    {
      initialValues: {
        password: "",
        confirmPassword: "",
      },
      validate: zodResolver(customZodSchema),
    }

Mantine form requires a the field's input props to be spread on the input

<PasswordInput label="Password" {...form.getInputProps("password")} />

Formik

Install Formik (if not already) along side the Formik form zod adapter

yarn add formik zod-formik-adapter

Import these dependencies in the same component you imported the schema

import { Formik, Form } from "formik"
import { toFormikValidate } from "zod-formik-adapter"

Supply the schema to Formik's validate prop. including initial values prop as well.

<Formik
  initialValues={{
    password: "",
    confirmPassword: "",
  }}
  validateOnChange={true}
  validate={toFormikValidate(customZodSchema)}
  onSubmit={submitForm}
>
  {({
    values,
    errors,
    touched,
    handleChange,
    handleBlur,
    handleSubmit,
  }) => (
    [...form fields]
  )}
</Formik>

Formik passes down data to form elements

<PasswordInput
  label="Password"
  onChange={handleChange("password")}
  onBlur={handleBlur}
  value={values.password}
  name="password"
/>

React Final Form

Install React Final Form (if not already)

yarn add react-final-form

Import these dependencies in the same component you imported the schema

import { Form, Field } from "react-final-form"

Create a generic handler

const formValidator = <T extends z.ZodType<any, any>>(schema: T) =>
  (values: any) => {
    try {
      schema.parse(values)
      return {}
    } catch (err) {
      return (err as z.ZodError).formErrors.fieldErrors
    }
  }

Supply the schema to our generic handler within the validate prop. including initial values prop as well.

<Form
  onSubmit={submitForm}
  validate={formValidator(customZodSchema)}
  render={() => (
  )}>
  [...form fields]
</Form>

Within the render prop of React Final Form's <Form> element, add your inputs inside their <Field> component.

<Field name="password">
  {({ input, meta }) => (
    <PasswordInput
      label="Password"
      error={meta.touched && meta.error ? meta.error[0] : null}
      {...input}
    />
  )}
</Field>

README

Zod Password Validation Schema

NPM Install:

npm install zod-password-validation-schema

Yarn Install:

yarn add zod-password-validation-schema

Schema Details

Requires two form fields named password and confirmPassword
Password has a min length of 6 characters
Password has at least 1 uppercase character
Password has at least 1 lowercase character
Password has at least 1 number
Password has at least 1 special character (!@#$%^&*()_-+={[}]|:;"'<,>.)

Usage

React Hook Form
Mantine Form
Formik
React Final Form

Universal Requirement

Once installed via npm or yarn, import dependency into your component

import { customZodSchema } from "zod-password-validation-schema"

React Hook Form

Install react-hook-form (if not already) along side the react-hook-form zod resolver

yarn add react-hook-form @hookform/resolvers/zod

Import these dependencies in the same component you imported the schema

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"

Supply the schema to react-hook-form's useForm hook, including default values

const { control, handleSubmit } = useForm({
  defaultValues: {
    password: "",
    confirmPassword: "",
  },
  resolver: zodResolver(customZodSchema),
})

React-hook-form requires a control={control} prop to be added to your form fields

<PasswordInput
  name="confirmPassword"
  label="Confirm password"
  control={control}
/>

Mantine

Install Mantine form (if not already) along side the Mantine form zod resolver

yarn add @mantine/form mantine-form-zod-resolver

Import these dependencies in the same component you imported the schema

import { useForm } from "@mantine/form"
import { zodResolver } from "mantine-form-zod-resolver"

Supply the schema to Mantine's useForm hook, including initial values

const form =
  useForm <
  z.infer <
  typeof customZodSchema >>
    {
      initialValues: {
        password: "",
        confirmPassword: "",
      },
      validate: zodResolver(customZodSchema),
    }

Mantine form requires a the field's input props to be spread on the input

<PasswordInput label="Password" {...form.getInputProps("password")} />

Formik

Install Formik (if not already) along side the Formik form zod adapter

yarn add formik zod-formik-adapter

Import these dependencies in the same component you imported the schema

import { Formik, Form } from "formik"
import { toFormikValidate } from "zod-formik-adapter"

Supply the schema to Formik's validate prop. including initial values prop as well.

<Formik
  initialValues={{
    password: "",
    confirmPassword: "",
  }}
  validateOnChange={true}
  validate={toFormikValidate(customZodSchema)}
  onSubmit={submitForm}
>
  {({
    values,
    errors,
    touched,
    handleChange,
    handleBlur,
    handleSubmit,
  }) => (
    [...form fields]
  )}
</Formik>

Formik passes down data to form elements

<PasswordInput
  label="Password"
  onChange={handleChange("password")}
  onBlur={handleBlur}
  value={values.password}
  name="password"
/>

React Final Form

Install React Final Form (if not already)

yarn add react-final-form

Import these dependencies in the same component you imported the schema

import { Form, Field } from "react-final-form"

Create a generic handler

const formValidator = <T extends z.ZodType<any, any>>(schema: T) =>
  (values: any) => {
    try {
      schema.parse(values)
      return {}
    } catch (err) {
      return (err as z.ZodError).formErrors.fieldErrors
    }
  }

Supply the schema to our generic handler within the validate prop. including initial values prop as well.

<Form
  onSubmit={submitForm}
  validate={formValidator(customZodSchema)}
  render={() => (
  )}>
  [...form fields]
</Form>

Within the render prop of React Final Form's <Form> element, add your inputs inside their <Field> component.

<Field name="password">
  {({ input, meta }) => (
    <PasswordInput
      label="Password"
      error={meta.touched && meta.error ? meta.error[0] : null}
      {...input}
    />
  )}
</Field>

gem-hunter