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

関連

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

注意点として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 (
    
      
        name: 
        {formik.errors.foo && (
          {formik.errors.foo}
        )}
      

      
    
  );
};

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

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

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

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

純

Change Log