3

私はお問い合わせフォームにvalidatejqueryプラグインとrecaptchaを使用していますが、エラーメッセージを送信しない場合は、フォームが送信される前にキャプチャのコードが正しいかどうかを確認する方法を知りたいです。とにかくフォームが送信される間違ったコード。これが助けのための事前の私のコードです

<script type="text/javascript">
             var RecaptchaOptions = {
                lang : 'en',
                theme : 'custom',
                custom_theme_widget: 'recaptcha_widget'
             };
            </script>

            <form id="contact" method="post" action="#">

                <fieldset>
                    <label for="name_contact">NAME</label>
                    <input type="text" class="input-xlarge" id="name_contact" name="name_contact" value="" placeholder="" minlength="2">

                    <label for="email_contact">EMAIL</label>
                    <input type="email" class="input-xlarge" id="email_contact" name="email_contact" value="" placeholder="">

                    <label for="telephone">CONTACT NUMBER</label>
                    <input type="tel" class="input-xlarge" id="telephone" name="telephone" placeholder="" value="" >

                    <label for="message">MESSAGE</label>
                    <textarea id="message" class="input-xlarge" name="message" placeholder="" rows="5"></textarea>                  

                    <div id="recaptcha_widget" style="display:none">

                        <div id="recaptcha_image"></div>
                        <div class="recaptcha_only_if_incorrect_sol" style="color:red">Incorrect please try again</div>

                        <span class="recaptcha_only_if_image">Enter the words above:</span>
                        <span class="recaptcha_only_if_audio">Enter the numbers you hear:</span>

                        <input type="text" id="recaptcha_response_field" name="recaptcha_response_field" />

                        <div><a href="javascript:Recaptcha.reload()">Get another CAPTCHA</a></div>
                        <div class="recaptcha_only_if_image"><a href="javascript:Recaptcha.switch_type('audio')">Get an audio CAPTCHA</a></div>
                        <div class="recaptcha_only_if_audio"><a href="javascript:Recaptcha.switch_type('image')">Get an image CAPTCHA</a></div>

                        <div><a href="javascript:Recaptcha.showhelp()">Help</a></div>

                    </div>

                    <script type="text/javascript"
                        src="http://www.google.com/recaptcha/api/challenge?k=6Lf8RN4SAAAAAKnllVnDw23UpBIuAIdTRFgN1kmX">
                    </script>

                    <noscript>
                        <iframe src="http://www.google.com/recaptcha/api/noscript?k=6Lf8RN4SAAAAAKnllVnDw23UpBIuAIdTRFgN1kmX" height="300" width="500" frameborder="0"></iframe><br>
                        <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
                        <input type="hidden" name="recaptcha_response_field" value="manual_challenge">
                    </noscript>             

                    <button type="submit" value="" id="" name="send" class="pull-right lightblue btn-primary">SUBMIT</button>
                    </fieldset>
</form>


<script type="text/javascript">
    $(document).ready(function () {

        $("#contact").validate({
            rules: {
                "name_contact": {
                    required: true,
                    minlength: 3
                },
                "email_contact":{
                    required: true
                },
                "message":{
                    required:true
                },
                "recaptcha_response_field":{
                    required:true
                }

            },
            messages: {
                "name_contact": {
                    required: "Please, enter a name"
                },
                "email_contact":{
                    required: "Enter a valid email"
                },
                "message":{
                    required: "Please provide a comment"
                },
                "recaptcha_response_field":{
                    required: "Captcha is required"
                }
            },
            errorPlacement: function(error, element) {
                error.insertBefore(element);
            }
        });

    });
</script>
4

1 に答える 1

6

JavaScriptまたはjQueryのみを使用する簡単な解決策はありません。APIと秘密鍵を使用してRe-Captchaコードを比較する必要があるため、適切なセキュリティを確保するために、サーバー側のコードを使用してこのプロセスを実行する必要があります。

  1. Re-Captchaコードを除いて、ユーザーはフォームに正しく入力します。

  2. Re-Captchaコードが空白の場合、jQueryValidateの通常のrequiredルールが「MissingCaptcha」メッセージをトリガーします。ユーザーは再試行できます。

  3. Re-Captchaコードが（正しくまたは誤って）入力されたフォームは、コールバック関数内のjQueryを介してサーバー側のコードに送信されます。ajaxsubmitHandler

  4. サーバー側のコード、PHP、Perlなどは、プライベートAPIキーを使用して、入力されたRe-CaptchaコードをAPIが期待するRe-Captchaコードと照合します。

  5. Re-Captchaコードが正しい場合、サーバーajax success側のコードは通常どおり続行され、jQueryコールバック関数に「成功」​​のテキスト応答を返します。

  6. Re-Captchaコードが正しくない場合、サーバー側のコードはjQueryコールバック関数に対して「エラー」テキスト応答のみajax successを返し、サーバー側のコードはそれ以外のことは何もしません。

  7. jQueryajax successコールバック関数内で、サーバー側のコードから返されたメッセージテキストを読み取ります。

  8. 返されたメッセージが成功を示している場合、フォームはすでに正常に送信されており、リダイレクト、フォームのクリア、アニメーションの実行、メッセージの印刷、何もしないなどの操作を行うことができます。

  9. 返されたメッセージが失敗を示している場合は、JavaScriptを介して新しいRe-Captchaコードを生成し、「不正なキャプチャが入力されました」というエラーメッセージを表示すると、ユーザーは簡単に再試行できます。

これが私のやり方です...あなたは次のようなことをする必要があります。

オプションにを追加し、フォームの送信を制御するために使用しsubmitHandlerます。これは、キャプチャを操作してフォームの送信を制御できる唯一の方法です。.validate()ajax

また、サーバー側の関数を変更して、キャプチャが成功したか失敗したかをテストし、適切な関数を実行して、適切なajaxメッセージを返す必要がありますmsg。サーバー側のコードについて何も知らなければ、これ以上具体的なことを言うことはできません。

（注： サーバー側のコードを編集せずに純粋にJavaScript / jQueryであるソリューションは安全ではありません。キャプチャは簡単にバイパスでき、プライベートAPIキーは公開されます。）

$(document).ready(function() {

    $("#contact").validate({
        // your other options and rules,
        submitHandler: function (form) {
            $.ajax({
                type: 'POST',
                data: $('form').serialize(),
                url: 'formMail.pl', // <-- whatever your server-side script, mine is a perl form mailer
                success: function (msg) {
                    if (msg.indexOf('captcha') != -1) {
                        Recaptcha.reload(); // reloads a new code
                        $('#recaptcha_response_field').before(msg); // error message
                    } else {
                        // anything else to do upon success, animations, etc.
                        // form was already submitted as per ajax
                    }
                }
            });
            return false; // blocks normal form submit
        }
    });

});

以下は、FormMailerスクリプトであるサーバー側コードを変更したPERLの例にすぎません。同様の方法でサーバー側のコードを適応させる必要があります。

サブルーチンcheck_captchaは、スクリプトが最初に実行されるときに呼び出されます。

sub check_captcha {     
       my $ua = LWP::UserAgent->new();
       my $result=$ua->post(
           'http://www.google.com/recaptcha/api/verify',
           {
               privatekey => 'xxxxxxxxxxxxx',  # insert your private key here
               remoteip   => $ENV{'REMOTE_ADDR'},
               challenge  => $Form{'recaptcha_challenge_field'},
               response   => $Form{'recaptcha_response_field'}
           }
       );

       if ( $result->is_success && $result->content =~ /^true/) {
               return;  # OK - continue as normal with Form Mailer
       } else {
               # error, Form Mailer will not continue
               &error('captcha_failed'); # failed Captcha code, call error subroutine to print an error message (msg) containing the word "captcha"
       }
}

このサーバー側のコードは、上記のようにjQueryがjQueryコールバック内で取得するメッセージを返す必要があることに注意してください。私の例では、メッセージに「captcha」という単語が含まれている場合、それはコードが間違って入力されたことを意味し、ユーザーは新しいCaptchaコードを再入力する必要があります。ajax successmsg

于 2013-03-14T16:03:55.827 に答える