最初の入力が済むまでエラーメッセージを表示しない

「最初の入力が済むまで」というのは例えば、<input>要素にいくつか入力後、フォーカスが外れた時の事を指します。

formikvalidateformik.handleChangeが呼ばれる度実行されます。なので「'foo'と入力しろ」といバリデーションが設定されていた時、最初に'f'と入力しただけでもformik.errorsにエラーメッセージが入ってしまい、表示してしまいます。これはユーザーにとってはあまりいい体験ではありません。

この体験を改善する方法を Formik は提供しています。それにはformik.touched.[name]値を使います。formik.touchedとはまさにやりたかった「1度はフォーカスが外れた経験をしてるかどうか」を持ちます。この初期値(1度もフォーカスが外れてない時)はfalseになります。

このformik.touchedを使うための準備として<input>formik.handleBlurハンドラーを設定します。このハンドラーもhandleChangeなどと同じ様にnameid属性が必須になります。

[例]です。

<label>
  name:{" "}
  <input
    name="foo"
    onChange={formik.handleChange}
    onBlur={formik.handleBlur}
  />
  {formik.touched.foo && formik.errors.foo && (
    <span style={{ color: "red" }}>{formik.errors.foo}</span>
  )}
</label>

重要なのはエラーメッセージを表示する条件でformik.touched.fooを使っている点です。これにより「1度はフォーカスを外した経験があり、エラーメッセージがあるならそれを表示する」という条件にできます。