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 (
<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>
);
};
validationSchema
はyup.object().shape({...})
のような形で作ります。この各プロパティに更にスキーマを設定していきます。ここではfoo
プロパティの値に対して設定をしてます。
require(message)
によって空文字列は駄目matches(pattern, message)
によってfoo
じゃないと駄目
もし引っかかった時引数のメッセージがformik.errors
に渡されます。これはデフォルトだとfoo must match the following: "/^foo$/"
のような日本人やプログラミングが分からない人には分かりづらいメッセージになってしまう為必ず設定すると良いです。