検証

Formik は、複雑な検証を伴うフォームを容易に管理できるように設計されています。Formik は、同期および非同期のフォームレベルとフィールドレベルの検証をサポートしています。さらに、Yup を介したスキーマベースのフォームレベル検証のサポートが組み込まれています。このガイドでは、上記のすべてについて詳細に説明します。

検証の種類

フォームレベルの検証

フォームレベルの検証は、関数が実行されるたびにフォームのすべての `値` とプロパティに完全にアクセスできるため、依存フィールドを同時に検証できるため便利です。

Formik でフォームレベルの検証を行うには、2 つの方法があります

`<Formik validate>` と `withFormik({ validate: ... })`
`<Formik validationSchema>` と `withFormik({ validationSchema: ... })`

`validate`

`<Formik>` と `withFormik()` は、同期または非同期関数を引数として受け取る `validate` という prop/オプションを受け取ります。

1 // Synchronous validation
2 const validate = (values, props /* only available when using withFormik */) => {
3   const errors = {};
4 
5   if (!values.email) {
6     errors.email = 'Required';
7   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
8     errors.email = 'Invalid email address';
9   }
10 
11   //...
12 
13   return errors;
14 };
15 
16 // Async Validation
17 const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
18 
19 const validate = (values, props /* only available when using withFormik */) => {
20   return sleep(2000).then(() => {
21     const errors = {};
22     if (['admin', 'null', 'god'].includes(values.username)) {
23       errors.username = 'Nice try';
24     }
25     // ...
26     return errors;
27   });
28 };

`<Formik validate>` の詳細については、API リファレンスを参照してください。

`validationSchema`

上記のように、検証はあなた次第です。独自のバリデーターを作成するか、サードパーティのライブラリを使用してください。The Palmer Group では、オブジェクトスキーマの検証に Yup を使用しています。Joi や React PropTypes によく似た API を備えていますが、ブラウザで使用するのに十分小さく、ランタイムでの使用に十分高速です。私たちは Yup をとても気に入っているので、Formik には Yup オブジェクトスキーマ用の特別な設定オプション/プロパティである `validationSchema` があります。これは、Yup の検証エラーを、キーが `値` と `touched` に一致するきれいなオブジェクトに自動的に変換します。この対称性により、エラーメッセージに関するビジネスロジックを簡単に管理できます。

プロジェクトに Yup を追加するには、NPM からインストールします。

 npm install yup --save

1 import React from 'react';
2 import { Formik, Form, Field } from 'formik';
3 import * as Yup from 'yup';
4 
5 const SignupSchema = Yup.object().shape({
6   firstName: Yup.string()
7     .min(2, 'Too Short!')
8     .max(50, 'Too Long!')
9     .required('Required'),
10   lastName: Yup.string()
11     .min(2, 'Too Short!')
12     .max(50, 'Too Long!')
13     .required('Required'),
14   email: Yup.string().email('Invalid email').required('Required'),
15 });
16 
17 export const ValidationSchemaExample = () => (
18   <div>
19     <h1>Signup</h1>
20     <Formik
21       initialValues={{
22         firstName: '',
23         lastName: '',
24         email: '',
25       }}
26       validationSchema={SignupSchema}
27       onSubmit={values => {
28         // same shape as initial values
29         console.log(values);
30       }}
31     >
32       {({ errors, touched }) => (
33         <Form>
34           <Field name="firstName" />
35           {errors.firstName && touched.firstName ? (
36             <div>{errors.firstName}</div>
37           ) : null}
38           <Field name="lastName" />
39           {errors.lastName && touched.lastName ? (
40             <div>{errors.lastName}</div>
41           ) : null}
42           <Field name="email" type="email" />
43           {errors.email && touched.email ? <div>{errors.email}</div> : null}
44           <button type="submit">Submit</button>
45         </Form>
46       )}
47     </Formik>
48   </div>
49 );

`<Formik validationSchema>` の詳細については、API リファレンスを参照してください。

フィールドレベルの検証

`validate`

Formik は、`<Field>`/`<FastField>` コンポーネントまたは `useField` フックの `validate` プロパティを介してフィールドレベルの検証をサポートしています。この関数は同期または非同期（Promise を返す）にすることができます。デフォルトでは、`onChange` と `onBlur` の後に実行されます。この動作は、トップレベルの `<Formik/>` コンポーネントでそれぞれ `validateOnChange` および `validateOnBlur` プロパティを使用して変更できます。変更/ぼかしに加えて、すべてのフィールドレベルの検証は送信試行の開始時に実行され、結果はトップレベルの検証結果と深くマージされます。

注：`<Field>/<FastField>` コンポーネントの `validate` 関数は、マウントされたフィールドでのみ実行されます。つまり、フォームのフロー中にフィールドのマウントが解除された場合（例：Material-UI の `<Tabs>` は、ユーザーがいた前の `<Tab>` のマウントを解除します）、これらのフィールドはフォームの検証/送信中に検証されません。

1 import React from 'react';
2 import { Formik, Form, Field } from 'formik';
3 
4 function validateEmail(value) {
5   let error;
6   if (!value) {
7     error = 'Required';
8   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
9     error = 'Invalid email address';
10   }
11   return error;
12 }
13 
14 function validateUsername(value) {
15   let error;
16   if (value === 'admin') {
17     error = 'Nice try!';
18   }
19   return error;
20 }
21 
22 export const FieldLevelValidationExample = () => (
23   <div>
24     <h1>Signup</h1>
25     <Formik
26       initialValues={{
27         username: '',
28         email: '',
29       }}
30       onSubmit={values => {
31         // same shape as initial values
32         console.log(values);
33       }}
34     >
35       {({ errors, touched, isValidating }) => (
36         <Form>
37           <Field name="email" validate={validateEmail} />
38           {errors.email && touched.email && <div>{errors.email}</div>}
39 
40           <Field name="username" validate={validateUsername} />
41           {errors.username && touched.username && <div>{errors.username}</div>}
42 
43           <button type="submit">Submit</button>
44         </Form>
45       )}
46     </Formik>
47   </div>
48 );

検証の手動トリガー

Formik を使用して、それぞれ `validateForm` および `validateField` メソッドを使用して、フォームレベルとフィールドレベルの検証を手動でトリガーできます。

1 import React from 'react';
2 import { Formik, Form, Field } from 'formik';
3 
4 function validateEmail(value) {
5   let error;
6   if (!value) {
7     error = 'Required';
8   } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value)) {
9     error = 'Invalid email address';
10   }
11   return error;
12 }
13 
14 function validateUsername(value) {
15   let error;
16   if (value === 'admin') {
17     error = 'Nice try!';
18   }
19   return error;
20 }
21 
22 export const FieldLevelValidationExample = () => (
23   <div>
24     <h1>Signup</h1>
25     <Formik
26       initialValues={{
27         username: '',
28         email: '',
29       }}
30       onSubmit={values => {
31         // same shape as initial values
32         console.log(values);
33       }}
34     >
35       {({ errors, touched, validateField, validateForm }) => (
36         <Form>
37           <Field name="email" validate={validateEmail} />
38           {errors.email && touched.email && <div>{errors.email}</div>}
39 
40           <Field name="username" validate={validateUsername} />
41           {errors.username && touched.username && <div>{errors.username}</div>}
42           {/** Trigger field-level validation
43            imperatively */}
44           <button type="button" onClick={() => validateField('username')}>
45             Check Username
46           </button>
47           {/** Trigger form-level validation
48            imperatively */}
49           <button
50             type="button"
51             onClick={() => validateForm().then(() => console.log('blah'))}
52           >
53             Validate All
54           </button>
55           <button type="submit">Submit</button>
56         </Form>
57       )}
58     </Formik>
59   </div>
60 );

検証はいつ実行されますか？

ニーズに応じて `<Formik validateOnChange>` および/または `<Formik validateOnBlur>` プロパティの値を変更することにより、Formik が検証を実行するタイミングを制御できます。デフォルトでは、Formik は次のように検証メソッドを実行します

**「変更」イベント/メソッドの後**（`値` を更新するもの）

handleChange
setFieldValue
setValues

**「ぼかし」イベント/メソッドの後**（`touched` を更新するもの）

handleBlur
setTouched
setFieldTouched

送信が試行されるたびに

handleSubmit
submitForm

また、Formik のレンダー/注入されたプロパティを介して提供される命令型ヘルパーメソッドもあり、これらを使用して命令的に検証を呼び出すことができます。

validateForm
validateField

エラーメッセージの表示

エラーメッセージは、フォームの検証に依存します。エラーが存在し、検証関数が値/初期値に一致する形状のエラーオブジェクト（そうあるべきです）を生成する場合、依存フィールドエラーは errors オブジェクトからアクセスできます。

1 import React from 'react';
2 import { Formik, Form, Field } from 'formik';
3 import * as Yup from 'yup';
4 
5 const DisplayingErrorMessagesSchema = Yup.object().shape({
6   username: Yup.string()
7     .min(2, 'Too Short!')
8     .max(50, 'Too Long!')
9     .required('Required'),
10   email: Yup.string().email('Invalid email').required('Required'),
11 });
12 
13 export const DisplayingErrorMessagesExample = () => (
14   <div>
15     <h1>Displaying Error Messages</h1>
16     <Formik
17       initialValues={{
18         username: '',
19         email: '',
20       }}
21       validationSchema={DisplayingErrorMessagesSchema}
22       onSubmit={values => {
23         // same shape as initial values
24         console.log(values);
25       }}
26     >
27       {({ errors, touched }) => (
28         <Form>
29           <Field name="username" />
30           {/* If this field has been touched, and it contains an error, display it
31            */}
32           {touched.username && errors.username && <div>{errors.username}</div>}
33           <Field name="email" />
34           {/* If this field has been touched, and it contains an error, display
35           it */}
36           {touched.email && errors.email && <div>{errors.email}</div>}
37           <button type="submit">Submit</button>
38         </Form>
39       )}
40     </Formik>
41   </div>
42 );

ErrorMessage コンポーネントを使用して、エラーメッセージを表示することもできます。

よくある質問

フォームが検証されているかどうかを確認するにはどうすればよいですか？

`isValidating` プロパティが `true` の場合

`null` をエラーメッセージとして返すことはできますか？

いいえ。代わりに `undefined` を使用してください。Formik は、空の状態を表すために `undefined` を使用します。`null` を使用すると、Formik の計算されたプロパティのいくつかの部分（たとえば、`isValid` など）は予期したとおりに機能しません。

検証をテストするにはどうすればよいですか？

Formik には Yup 検証の広範な単体テストがあるため、テストする必要はありません。ただし、独自の検証関数を作成している場合は、それらを単体テストする必要があります。Formik の実行をテストする必要がある場合は、それぞれ命令型の `validateForm` および `validateField` メソッドを使用する必要があります。

前へv1.x から v2.x への移行次へ配列

このページはお役に立ちましたか？