LoginSignup
2
0

More than 1 year has passed since last update.

reCAPTCHAがタイムアウトした場合の対応

Posted at

今回、自身で設置しておらず、タイトルの問題の解決のみお手伝いしたので、そこだけ書きます。

結論

<div class="g-recaptcha" data-sitekey="サイトキー" data-callback="recaptcha_callback" data-expired-callback="recaptcha_expired_callback"></div>
<input type="submit" id="form_submit" disabled>

<script>
    function recaptcha_callback() {
      $('#form_submit').removeAttr('disabled');
       };    
    function recaptcha_expired_callback() {
      $('#form_submit').attr('disabled', true);
    }
</script>

参考サイト

簡単に解説

reCAPTCHAの設置をしたことがなかったので、どういうものなのか、どうすべきものなのかはよくわかっていないです。
フォームの送信ボタンをdisabledにしておいて、reCAPTCHAをクリックしたらdisabledを外す、というやり方らしい。
(今回頼まれたものがそうなっていたし、調べたらすぐそのやり方が出てきた)

そして、チェックしたあと、2分でタイムアウトしてもう一度チェックしないといけなくなるが、このままだと送信ボタンは押下でき、エラーメッセージなどは画面に表示されないとのこと。

その、タイムアウトした場合の対応方法が書いている記事は見つけられなかった。
(タイムアウトをなかったことにするというのはあった)

上記の参考サイトを見たら、以下の内容が書いてあった。

data-expired-callback
ユーザーがウィジェットにチェックを入れた後に一定の期間(2分間)が過ぎてユーザが再度チェックする必要がある場合に呼び出されるコールバック関数の名前。

これで対応できるのでは?とやってみたらできました。

結構シンプルな方法なのに、シンプルだからか、そういう記事に出会わなかったので、ここにメモしておきます。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0