「最初の入力が済むまで」というのは例えば、<input>
要素にいくつか入力後、フォーカスが外れた時の事を指します。
formik
のvalidate
はformik.handleChange
が呼ばれる度実行されます。なので「'foo'
と入力しろ」といバリデーションが設定されていた時、最初に'f'
と入力しただけでもformik.errors
にエラーメッセージが入ってしまい、表示してしまいます。これはユーザーにとってはあまりいい体験ではありません。
この体験を改善する方法を Formik は提供しています。それにはformik.touched.[name]
値を使います。formik.touched
とはまさにやりたかった「1度はフォーカスが外れた経験をしてるかどうか」を持ちます。この初期値(1度もフォーカスが外れてない時)はfalse
になります。
このformik.touched
を使うための準備として<input>
にformik.handleBlur
ハンドラーを設定します。このハンドラーもhandleChange
などと同じ様にname
かid
属性が必須になります。
例です。
重要なのはエラーメッセージを表示する条件でformik.touched.foo
を使っている点です。これにより「1度はフォーカスを外した経験があり、エラーメッセージがあるならそれを表示する」という条件にできます。