Yup を用いたバリデーション

validateで自分で関数を定義するのではなく、validationSchemaYup で定義したスキーマオブジェクトを渡すと規模によっては楽にバリデーションを実装できるかもしれません。

注意点としてvalidationSchemaよりvalidateの方が優先されます。この2つは一緒に設定することがないようにしましょう。

です。

import { useFormik } from "formik";
import * as yup from "yup";

const App = () => {
  const formik = useFormik({
    initialValues: {
      foo: ""
    },
    validationSchema: yup.object().shape({
      foo: yup
        .string()
        .required("必須です")
        .matches(/^foo$/, "fooと入力してください")
    }),
    onSubmit: values => {
      console.log(values);
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label>
        name: <input name="foo" onChange={formik.handleChange} />
        {formik.errors.foo && (
          <span style={{ color: "red" }}>{formik.errors.foo}</span>
        )}
      </label>

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

validationSchemayup.object().shape({...})のような形で作ります。この各プロパティに更にスキーマを設定していきます。ここではfooプロパティの値に対して設定をしてます。

  1. require(message)によって空文字列は駄目
  2. matches(pattern, message)によってfooじゃないと駄目

もし引っかかった時引数のメッセージがformik.errorsに渡されます。これはデフォルトだとfoo must match the following: "/^foo$/"のような日本人やプログラミングが分からない人には分かりづらいメッセージになってしまう為必ず設定すると良いです。