React Hook Form x Chakra UI 二重バリデーションで困った話

3 min read読了の目安(約3000字

このページではReact Hook Form(RHF)とChakra UIでフォームを作成していた際に、RHF側とChakra UI側のバリデーションが両方効いてしまったので、自分がどうやって解決したのかを記しておきます。

該当コード

<>
      <Heading as="h1" mt={1 / 10} fontSize="3xl">
        CONTACT
      </Heading>
      <form onSubmit={handleSubmit(onSubmit)} style={{ paddingTop: "15%" }}>
        <Flex justify="center" textAlign="center">
          <Box w="lg" p={4} borderRadius="md" shadow="md" bg="gray.50">
            <Stack spacing={4}>
              <FormControl id="name" isInvalid={!!errors.name} isRequired>
                <FormLabel>お名前(必須)</FormLabel>
                <Input
                  placeholder="山田  太郎"
                  {...register("name", { required: true })}
                />
                <FormErrorMessage>{errors.name && "お名前を入力してください"}</FormErrorMessage>
              </FormControl>
              <FormControl id="email" isInvalid={!!errors.email} >
                <FormLabel>メールアドレス(必須)</FormLabel>
                <Input
                  placeholder="test@example.com"
                  {...register("email", { required: true })}
                />
                <FormErrorMessage>
                  {errors.name && "メールアドレスを入力してください"}
                </FormErrorMessage>
              </FormControl>
              <FormControl id="contents" isInvalid={!!errors.contents} >
                <FormLabel>お問い合わせ内容(必須)</FormLabel>
                <Input
                  placeholder="例) こんにちは"
                  {...register("contents", { required: true })}
                />
                <FormErrorMessage>
                  {errors.contents && "お問い合わせ内容を入力してください"}
                </FormErrorMessage>
              </FormControl>
            </Stack>
            <Button
              mt={4}
              colorScheme="teal"
              loadingText="送信中"
              isLoading={formState.isSubmitting}
              type="submit"
            >
              送信
            </Button>
          </Box>
        </Flex>
      </form>
    </>

該当バリデーション

予想していないバリデーション

予想していたバリデーション

解決策

最初に述べておきますと、FormControlisRequired(赤いアスタリスク)を削除しました。
本末転倒じゃんって感じもしますが、よくよくChakra UIを調べてみるとFormControlの部分にこんな記述がありました。

訳してみると

isRequierdを付与すると、Inputタグのaria-requiredtrueにセットされます。

Inputのaria-requiredってなんぞやって感じですが、参考記事を載せておきます。

原因

いちばん上のデモを試してみると分かりますが、上記の同じようなバリデーションが発生します。原因はこいつだったようですね。根本的な解決には至ってないですが、おしゃれじゃない(個人的)なバリデーションを発生させるくらいなら、アスタリスクくらい捨てて必須と記述してやるよ!!!!といった感じに落ち着きました。

最後に

初投稿なので理解しにくい部分もあると思いますがご容赦ください。また間違っている部分や他の解決法を知っている方がいらっしゃれば教えてくだされば幸いです。
この記事を読んでいただきありがとうございました。よきエンジニアライフを!

参考URL

https://chakra-ui.com/docs/form/form-control#making-a-field-required
https://www.tsukimi.net/input_required.html