0

jQueryAJAXフォームにreCaptchaを追加する際に問題が発生しました。

ドキュメント、特にこのページをフォローしようとしましたが、うまくいきませんでした。

  • 「チャレンジと非JavaScriptAPI」を使用して、送信ボタンの前にコードを追加すると、出力が得られません。
  • フォーム内にカスタムdivを追加する「AJAXAPI」というメソッドを試してみると、とにかく何も得られません。基本的に、表示して検証することはできません。

これは私がこれまでに持っているコードです。

私のフォーム： 

  <div id="contactForm"><img src="img/contact-form.png" width="250" height="365" alt="contact" /></div>
  Name: <span class="contactErrorFloat" id="err-name">Need the name</span>
  <input name="name" id="name" type="text" placeholder="Name.." />

  Email: <span class="contactErrorFloat" id="err-email">Need email</span><span class="contactErrorFloat" id="err-emailvld">Email not valid.</span>
  <input name="email" id="email" type="text" placeholder="Email.." />

  Message:
  <textarea name="message" id="message" rows="10" placeholder="Message.."></textarea>

  <button id="send">Send</button>

  <div class="contactError" id="err-form">Error during validation</div>
  <div class="contactError" id="err-timedout">Timeout</div>
  <div class="contactError" id="err-state"></div>

  <div id="ajaxsuccess">Email sent!</div>
</form>

私のスクリプト：

jQuery(document).ready(function ($) {
    $('#send').click(function(){
        $('.error').fadeOut('slow'); // Resetta i messaggi di errore, nascondendoli

        var error = false;

        var name = $('input#name').val();
        if (name == "" || name == " ") {
            $('#err-name').fadeIn('slow');
            error = true;
        }

        var email_compare = /^([a-z0-9_.-]+)@([da-z.-]+).([a-z.]{2,6})$/;
        var email = $('input#email').val();
        if (email == "" || email == " ") {
            $('#err-email').fadeIn('slow');
            error = true;
        } else if (!email_compare.test(email)) {
            $('#err-emailvld').fadeIn('slow');
            error = true;
        }

        if (error == true) {
            $('#err-form').slideDown('slow');
            return false;
        }

        var data_string = $('#ajax-form').serialize();

        $.ajax({
            type: "POST",
            url: $('#ajax-form').attr('action'),
            data: data_string,
            timeout: 6000,
            error: function(request, error) {
                if (error == "timeout") {
                    $('#err-timedout').slideDown('slow');
                } else {
                    $('#err-state').slideDown('slow');
                    $('#err-state').html('C\'è stato un errore: ' + error + '');
                }
            },
            success: function () {
                $('ajax-form').slideUp('slow');
                $('#ajaxsuccess').slideDown('slow');
            }
        });

        return false;
    });
});

メールを送信するためのphp関数を含むPHPファイルもありますが、実際にはそれほど重要ではないと思います。誰かがこれを実装するために私に助けを与えることができれば、私は本当に大好きです。どうもありがとう！

4

1 に答える 1

1

まず、recaptchaにサインインする必要があります。あなたはここでこれを行うことができます： recaptcha.net

その後、あなたはあなたの鍵を手に入れることができます。次に、キーをサンプルコードに埋め込みます。ここ

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

そしてここ

 <iframe src="http://www.google.com/recaptcha/api/noscript?k=**your_public_key**"
     height="300" width="500" frameborder="0"></iframe>
于 2013-01-03T11:33:44.193 に答える