<form>タグのnovalidateについて（react-hook-form）

Question

質問

聞きたいこと

react-hook-formを使用したときの<form>タグのnovalidateについて
いろんな参考サイトを見ると<form>タグにnovalidateを使用しているのですが理由がわかりません。

自分でやったこと

• 手元の資産で設定しても外しても影響がなさそうです。
• 加えて、理由を調べてみたのですが特に解説しているサイトに辿り着けませんでした。
• 個人的にはreact-hook-formのバリデーションを使用しているためかと推測していますが、上記に記載の通り設定してもしなくても、react-hook-formが正常に動いていたためわからなくなりました。

詰まってしまったのでどなたかご教授ください。
よろしくお願いします。

Comments

[uky]

いろんな参考サイトとあるのですが、サイトへのリンクを追記していただけないでしょうか？

Answer 1

novalidate属性は HTML フォームでのブラウザのデフォルトバリデーションを無効にするために使用されます。

React Hook Form を使用する場合、ライブラリがカスタムバリデーションを提供しているためデフォルトのブラウザバリデーションと競合することを避けるためにnovalidate属性が推奨されることがあります。

具体的には、以下の理由からnovalidate属性を使用することがあります。

1. ブラウザのデフォルトバリデーションと React Hook Form のバリデーションが競合しないようにするため
2. 一貫性のあるエラーメッセージとスタイルを提供するため
3. ブラウザ間のバリデーションの違いを排除するため

ただし、novalidateを設定してもしなくても、React Hook Form のバリデーションは正常に動作することがあります。これは、React Hook Form がフォームの送信イベントを制御し、デフォルトのブラウザバリデーションが実行される前にカスタムバリデーションを実行するためです。

しかし、一部のブラウザや状況では、デフォルトのバリデーションが実行される可能性があるため、novalidate属性を使用してブラウザのデフォルトバリデーションを無効にすることが一般的です。

結論として、novalidate属性を使用することで、ブラウザのデフォルトバリデーションと React Hook Form のバリデーションが競合することを防ぎ、より一貫したバリデーション体験を提供できます。ですので、React Hook Form を使用する際にnovalidate属性を設定するのは良いかもしれません。