reCAPTCHA v3でHTMLのフォームバリデーションをつかう

こんにちは。田村です

reCAPTCHA v3を設置したところ、HTMLのフォームバリデーションが効かなくなる問題が発生しました。公式のコードを確認すると、HTMLのバリデーションが動作する前にJavaScriptでsubmit処理が行われているようです。

そこで、reCAPTCHA のコードが実行される前にバリデーションを確認できるように修正する必要がありそうです。

参考:reCAPTCHA v3 公式ドキュメント

次にMDNのドキュメントを調べたところ、reportValidity()を利用して判定できそうでした。
参考:MDN - フォームバリデーション

修正したコード例です。

<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
<script>
 const form = document.getElementById("form");

 function onClick(e) {
  e.preventDefault();
  //HTMLフォームのバリデーションが通った場合に実行
  if (form.reportValidity()) {
   grecaptcha.ready(function() {
    grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
     // Add your logic to submit to your backend server here.
    });
   });
  }
 }
</script>

関連するタグ

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから