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:

1npm install zod-password-validation-schema

Yarn Install:

1yarn 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

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

React Hook Form

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

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

Import these dependencies in the same component you imported the schema

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

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

1const { control, handleSubmit } = useForm({
2  defaultValues: {
3    password: "",
4    confirmPassword: "",
5  },
6  resolver: zodResolver(customZodSchema),
7})

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

1<PasswordInput
2  name="confirmPassword"
3  label="Confirm password"
4  control={control}
5/>

Mantine

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

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

Import these dependencies in the same component you imported the schema

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

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

1const form =
2  useForm <
3  z.infer <
4  typeof customZodSchema >>
5    {
6      initialValues: {
7        password: "",
8        confirmPassword: "",
9      },
10      validate: zodResolver(customZodSchema),
11    }

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

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

Formik

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

1yarn add formik zod-formik-adapter

Import these dependencies in the same component you imported the schema

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

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

1<Formik
2  initialValues={{
3    password: "",
4    confirmPassword: "",
5  }}
6  validateOnChange={true}
7  validate={toFormikValidate(customZodSchema)}
8  onSubmit={submitForm}
9>
10  {({
11    values,
12    errors,
13    touched,
14    handleChange,
15    handleBlur,
16    handleSubmit,
17  }) => (
18    [...form fields]
19  )}
20</Formik>

Formik passes down data to form elements

1<PasswordInput
2  label="Password"
3  onChange={handleChange("password")}
4  onBlur={handleBlur}
5  value={values.password}
6  name="password"
7/>

React Final Form

Install React Final Form (if not already)

1yarn add react-final-form

Import these dependencies in the same component you imported the schema

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

Create a generic handler

1const formValidator = <T extends z.ZodType<any, any>>(schema: T) =>
2  (values: any) => {
3    try {
4      schema.parse(values)
5      return {}
6    } catch (err) {
7      return (err as z.ZodError).formErrors.fieldErrors
8    }
9  }

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

1<Form
2  onSubmit={submitForm}
3  validate={formValidator(customZodSchema)}
4  render={() => (
5  )}>
6  [...form fields]
7</Form>

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

1<Field name="password">
2  {({ input, meta }) => (
3    <PasswordInput
4      label="Password"
5      error={meta.touched && meta.error ? meta.error[0] : null}
6      {...input}
7    />
8  )}
9</Field>