isRequiredでフォームの入力を必須にすると、未入力の場合デフォルトのエラーメッセージが出力される。

はじめに

React×TypeScript×ChakuraUIでアプリを作成中です。
入力必須フォームを作成する際にisRequiredを使ったのですが、気づいたことがあったのでメモします。

問題

フォームが未入力の場合、「ログインIDの入力は必須です」のエラーメッセージを出したいのに、「このフィールドを入力してください」のエラーメッセージが出てしまいます。

入力フォームの実装を抜粋しました。

tsx

 <Box p={3}>
          <FormControl isInvalid={!!errors.loginID} isRequired>
            <FormLabel>好きな英単語</FormLabel>
            <Input
              data-testid="login-id"
              placeholder=" "
              {...register("loginID", { pattern: /^[A-Za-z]+$/i })}
            />
            <FormErrorMessage>
              {errors.loginID && "英字で入力してください"}
            </FormErrorMessage>
          </FormControl>
        </Box>

解決方法

isRequiredを消去したら自分でカスタムしたエラーメッセージが表示できるようになりました。

tsx

<Box p={3}>
          <FormControl isInvalid={!!errors.loginID}>
            <FormLabel>好きな英単語</FormLabel>
            <Input
              data-testid="login-id"
              placeholder=" "
              {...register("loginID", {
                required: "ログインIDの入力は必須です",
                pattern: {
                  value: /^[A-Za-z]+$/i,
                  message: "英字で入力してください",
                },
              })}
            />
            <FormErrorMessage>
              {errors.loginID && errors.loginID.message}
            </FormErrorMessage>
          </FormControl>
        </Box>

おわりに

isRequiredプロパティは、フォームの入力を指定する＋未入力時にデフォルトで「このフィールドを入力してください」のエラーメッセージを出力してくれるようです。