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

以前のブログはこちら

広告

こんにちは。ましじめの田村です。

私が執筆した著書、『現場のプロから学ぶ CSSコーディングバイブル』は、Web制作の現場で役立つテクニックやノウハウをまとめています。
興味を持っていただけた方は、ぜひご覧ください。
https://amzn.to/3A8kNHC

このリンクは Amazon のアフィリエイトプログラムを通じて設定されています。

こんにちは。田村です

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>

関連するタグ

全 1 件中 1 〜 1 件目を表示

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

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

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

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

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