スタッフブログ
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を利用したウェブサイト制作を担当しています。
趣味はガーデニングです。
ましじめのスキルが必要ですか？
遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、
あなたのウェブサイトの制作を強力にサポートいたします。