

reCAPTCHAが入っているページで、一部のお客様が「私はロボットではありません」をチェックできているのに、送信ボタンが押せるようになりません。  
大多数の方々は問題なく操作できているのですが、5%程の方から「送信ボタンが押せるようにならない」とクレームが参ります。  
念の為、お使いのブラウザを質問してみましたが、ばらばらでした。

IE11 v11.437.17763.0  
IE11 v11.0.9600.19356  
IE11 v11.0.9600.19301  
Chrome v58.0.3029.110  
Chrome v75.0.3770.100

また、途中からJavaScriptが有効かどうかも聞いていますが、IE/Chrome共に有効になっています。（そもそも、JavaScriptが有効でないとreCAPTCHAが表示されず、チェックもできないとは思いますが。。）

いずれの場合もエラーメッセージ等も出ません。

特定の環境で、この様な不具合が起こる等の知見をお持ちではないでしょうか？


CC BY-SA 4.0
2019-07-25T03:22:03.147
56874
2020-02-24T08:03:44.443
2020-02-24T08:03:44.443
3060
35246
question
javascript recaptcha
reCAPTCHAの「私はロボットではありません」をチェックしても送信ボタンが押せるようにならない


自分だったらとりあえず次の箇所を変更して、下記「確認したい点」を確認してみます。

（以下、コードブロックは自分が見たときの問題のページのソースコード）

[code]

        <script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>
    
[/code]

→ [公式ドキュメント](https://developers.google.com/recaptcha/docs/display) には `async
defer` がついているので付けてみる。JSファイルが実行されるのが遅延されるので、実行タイミングが影響してたら解決するかも。

[code]

    <script type="text/javascript">
    //<![CDATA[
    $(function() {
        $("#SenderSection").blur(function() {
            var error;
            if( $(this).val() === '' ) {
                error = true;
            }
            if (error) {
                if( !$(this).next('span.error').length ) {
                    $(this).after('<span class="error">未入力です</span>');
                }
            } else {
                $(this).next('span.error').remove();
            }
        });
        $("#SenderName").blur(function() {
            var error;
            if( $(this).val() === '' ) {
                error = true;
            }
            if (error) {
                if( !$(this).next('span.error').length ) {
                    $(this).after('<span class="error">未入力です</span>');
                }
            } else {
                $(this).next('span.error').remove();
            }
        });
        $("#SenderEmail").blur(function() {
            var error;
            if( $(this).val() === '' ) {
                error = true;
            }
            if (error) {
                if( !$(this).next('span.error').length ) {
                    $(this).after('<span class="error">未入力です</span>');
                }
            } else {
                $(this).next('span.error').remove();
                if(!$(this).val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)){
                    $(this).after('<span class="error">メールアドレスを正しく入力してください。</span>');
                }
            }
        });
        $("#SenderTel").blur(function() {
            var error;
            if( $(this).val() === '' ) {
                error = true;
            }
            if (error) {
                if( !$(this).next('span.error').length ) {
                    $(this).after('<span class="error">未入力です</span>');
                }
            } else {
                $(this).next('span.error').remove();
                var tel = $(this).val().replace(/[━.*‐.*―.*－.*\–.*ー.*\-]/gi,'');
                if(!tel.match(/^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/)) {
                    $(this).after('<span class="error">電話番号を正しく入力してください。</span>');
                }
            }
        });
        $('#SenderRequestButton').click(function() {
            var msg = '';
            var tel;
    
            var error;
            if($('#SenderSection').val() === '') {
                msg = msg + "団体名･ご所属は必須です。\n";
                error = true;
            }
            if($('#SenderName').val() === '') {
                msg = msg + "氏名は必須です。\n";
                error = true;
            }
            if(!$('#SenderEmail').val().match(/^([a-zA-Z0-9])+([a-zA-Z0-9\._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9\._-]+)+$/)) {
                msg = msg + "メールアドレスを正しく入力してください。\n";
                error = true;
            }
            tel = $('#SenderTel').val().replace(/[━.*‐.*―.*－.*\–.*ー.*\-]/gi,'');
            if(!tel.match(/^(0[5-9]0[0-9]{8}|0[1-9][1-9][0-9]{7})$/)) {
                msg = msg + "電話番号を正しく入力してください。\n";
                error = true;
            }
    
            if (error) {
                alert(msg);
                return false;
            }
            else {
                msg = "以下の内容を送信します。よろしいですか？\n"
                    + "団体名･ご所属: " + $('#SenderSection').val() + "\n"
                    + "氏名: " + $('#SenderName').val() + "\n"
                    + "メールアドレス: " + $('#SenderEmail').val() + "\n"
                    + "電話番号: " + $('#SenderTel').val();
                if (confirm(msg)) {
                    $(this).submit();
                } else {
                    return false;
                }
            }
        });
    });
    
    function enablebutton(code) {
        if(code !== ""){
            $('#SenderRequestButton').removeAttr('disabled');
        }
    }
    
    //]]>
    </script>
    
[/code]

→ 変数を参照する前に初期化（代入）する： `var error = false;`。function の中で一つずつ var
宣言しているので影響はないだろうけど念のため。

[code]

        <form action="https://ghg-santeikohyo.env.go.jp/download/request2" class="entryForm" novalidate="novalidate" id="SenderRequestForm" method="post" accept-charset="utf-8">
            <div style="display:none;"><input type="hidden" name="_method" value="POST"/></div>
            </div>
    
[/code]

→ ここの `</div>` が1個余計なので消す。

次のコードブロックは直す箇所は見当たらないが関係するコードなので便宜のため貼り付けときます：

[code]

            <div class="request">
                <label style="display:block;float:left;width:120px;">団体名・所属名</label>
                <input name="data[Sender][section]" class="form-control" placeholder="団体名・所属名" maxlength="50" type="text" id="SenderSection"/>
            </div>
            <div class="request">
                <label style="display:block;float:left;width:120px;">氏名</label>
                <input name="data[Sender][name]" class="form-control" placeholder="お名前" maxlength="50" type="text" id="SenderName"/>
            </div>
            <div class="request">
                <label style="display:block;float:left;width:120px;">メールアドレス</label>
                <input name="data[Sender][email]" class="form-control" placeholder="xxxx@yyyyyyyy" maxlength="50" type="text" id="SenderEmail"/>
            </div>
            <div class="request">
                <label style="display:block;float:left;width:120px;">電話番号</label>
                <input name="data[Sender][tel]" class="form-control" placeholder="電話番号" maxlength="20" type="text" id="SenderTel"/>
            </div>
            <div class="g-recaptcha" data-callback="enablebutton" data-sitekey="****"></div>
            <button class="bt btNext" id="SenderRequestButton" disabled="disabled" type="submit">送信</button>
        </form>
    
[/code]

## 確認したい点

  * 押せるようにならない場合はブラウザのキャッシュを消して再読み込みしても押せるようにならないのか

再現する環境があれば

  * 問題が起きたとき callback 関数 `enablebutton` は実行されているか
  * `call` パラメータはどういう値になっているか
  * コンソール（F12押して出るブラウザの開発者ツール）には何かエラーログは出ているか


CC BY-SA 4.0
2019-07-26T04:08:53.433
56905
2019-07-26T04:08:53.433
5469
56874
answer