Formik、最近副業で使い始めました。

最近、同ページ内のステップの分かれているフォームでステップを進めるごとにバリデーションしてほしいという要望が出たので対応しました。ステップが先のものをバリデーションしてしまうとステップを進む時にそこでバリデーションエラーが出ていれば詰まってしまいます。解決方法の結論としては、validationSchemaにstepごとで分けたバリデーションを渡すというものです。

// Formik（useFormik） + Yup
const [activeStep, setActiveStep] = useState(0);

const validateSchemaOfSteps = [
    Yup.object({
      userName: Yup.string().required("名は必須です"),
      email: Yup.string().required("メールアドレスは必須です").email("正しいメールアドレスを入力してください"),
    }),
    null, // バリデーションをしないステップ
    Yup.object({
      accepted: Yup.boolean().required("同意は必須です"),
    })
  ]

  const formik = useFormik({
    initialValues: {
      userName: "",
      email: "",
      accepted: false,
    },
    validationSchema: validateSchemaOfSteps[activeStep],
  …
  });

  // 現在のページをバリデーション検査しつつ、成功したら引数のステップに進む
  const changeStep = async (step) => {
    const validated = await formik.validateForm();
    if (Object.keys(validated).length === 0) setActiveStep(step);
  };

英語で調べるといくつか出てくるのですが、日本語でなかったのでメモ程度に。