Validasi Formik dengan Zod pada Aplikasi React

Oct 20, 2022

Zod

Zod adalah library validasi untuk typescript.

Formik

Formik adalah library untuk membuat form yang memudahkan developer untuk menghandle state dan form submit.

Di tutorial ini kita akan menggunakan Zod untuk memvalidasi input dari Formik. Contoh yang digunkan adalah form registrasi.

Zod schema

Schema inilah yang menjadi aturan validasi.

export const registrationSchema = z.object({
  email: z.string().email(),
  password: z.string().min(8),
});

Properti email harus memiliki format email yang valid. Dan properti password harus memiliki panjang minimal 8 karakter.

Type Inference

meng-infer type yang akan digunakan oleh formik.

export const RegistrationInput = z.infer<typeof RegistrationSchema>;

Form Registrasi

const RegistrationForm = () => (
  const initialValues: RegistrationInput = { email: "", password: "" };
  <div>
    <Formik
      initialValues={initialValues}
      validate={(values) => {
        try {
          registrationSchema.parse(values);
        } catch (error) {
          console.log(error);
          return error.formErrors.fieldErrors;
        }
      }}
      onSubmit={(values, { setSubmitting }) => {
        // kirim data ke backend...
      }}
    >
      {({
        values,
        errors,
        touched,
        handleChange,
        handleBlur,
        handleSubmit,
        isSubmitting,
      }) => (
        <form onSubmit={handleSubmit}>
          <input
            type="email"
            name="email"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.email}
          />

          {errors.email && touched.email && errors.email}

          <input
            type="password"
            name="password"
            onChange={handleChange}
            onBlur={handleBlur}
            value={values.password}
          />

          {errors.password && touched.password && errors.password}

          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </form>
      )}
    </Formik>
  </div>
);

Perhatikan bagian ini!

validate={(values) => {
    try {
      registrationSchema.parse(values);
    } catch (error) {
      console.log(error);
      return error.formErrors.fieldErrors;
    }
}}

registrationSchema melakukan parsing pada data yang disubmit ke Formik. Apabila data tidak valid maka Zod akan men-throw error dan akan di-catch. Di blok catch kita perlu mereturn error.formErrors.fieldErrors agar dapat diterima oleh Formik.