jquery - カスタム検証スクリプトを使用した Google reCaptcha の実装

Question

Google recaptcha を既存のフォームに組み込むのに 1 日を費やしましたが、現在の課題は、フォーム フィールドのカスタム検証スクリプト内に recaptcha 検証を含めたいということです。

検証スクリプトが機能する方法は、検証が成功した後に送信ハンドラーが関数を実行することです。成功アクションは電子メール スクリプトを処理します。

電子メール スクリプトが送信される前に、キャプチャを検証したいと考えています。現在のセットアップでこれを行うにはどうすればよいですか? これを処理するためにcustom.jsでajaxを使用しています。submithandlerを見てください。これについて何か助けていただければ幸いです。

次の 3 つのファイルがあります。

• フォームのhtmlファイル
• custom.js
• verify.php

フォーム HTML

<form id="appointment" name="appointment" method="post" action="">

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

    <fieldset>

        <div class="span11 fix-margin">
            <div class="span5 fix-margin">
                <label for="name">Name</label>
                <input id="name" name="name" type="text" class="span4 required">
            </div>

            <div class="span5">
              <label for="patient">Are you a current patient?</label>
              <div>
                <label class="radio inline" for="radios-0">
                  <input type="radio" name="patient" id="patient-1" value="Yes">Yes
                </label>
                <label class="radio inline" for="radios-1">
                  <input type="radio" name="patient" id="patient-0" value="No">No
                </label>
              </div>
            </div>
        </div>

        <div class="span11 fix-margin">

            <div class="span5 fix-margin">
                <label for="address">Adress</label>
                <input id="address" name="address" type="text" class="span4">
            </div>
            <div class="span5">
                <label for="city">City</label>
                <input id="city" name="city" type="text" class="span3">
            </div>

        </div>

        <div class="span11 fix-margin">

            <div class="span5 fix-margin">
                <label for="state">State</label>
                <input id="state" name="state" type="text" class="span3">
            </div>
            <div class="span5">
                <label for="zip">Zip/Postal</label>
                <input id="zip" name="zip" type="text" class="span1">
            </div>

        </div>

        <div class="span11 fix-margin">

            <div class="span5 fix-margin">
                <label for="email">Email</label>
                <input id="email" name="email" type="text" class="span3 required">
            </div>

            <div class="span5">
                <label for="phone">Phone</label>
                <input id="phone" name="phone" type="text" class="span3 required">
            </div>

        </div>  

        <div class="span11 fix-margin checkboxes1">

            <!-- Multiple Checkboxes (inline) -->
            <div class="control-group span11 fix-margin">
              <label class="control-label" for="day">Preferred day(s) of the week for an appointment?</label>
              <div class="controls">
                <label class="checkbox inline" for="day-0">
                  <input type="checkbox" name="day[]" id="day-0" value="Any day">Any day
                </label>

                <label class="checkbox inline" for="day-1">
                  <input type="checkbox" name="day[]" id="day-1" value="Monday">Monday
                </label>

                <label class="checkbox inline" for="day-2">
                  <input type="checkbox" name="day[]" id="day-2" value="Tuesday">Tuesday
                </label>

                <label class="checkbox inline" for="day-3">
                  <input type="checkbox" name="day[]" id="day-3" value="Wednesday">Wednesday
                </label>

                <label class="checkbox inline" for="day-4">
                  <input type="checkbox" name="day[]" id="day-4" value="Thursday">Thursday
                </label>

                <label class="checkbox inline" for="day-5">
                  <input type="checkbox" name="day[]" id="day-5" value="Friday">Friday
                </label>

                <label class="checkbox inline" for="day-6">
                  <input type="checkbox" name="day[]" id="day-6" value="Saturday">Saturday
                </label>


              </div>
            </div>
        </div>

        <div class="span11 fix-margin checkboxes2">

            <!-- Multiple Checkboxes (inline) -->
            <div class="control-group span11 fix-margin">
              <label class="control-label" for="time">Preferred time(s) for an appointment?</label>
              <div class="controls">
                <label class="checkbox inline" for="time-0">
                  <input type="checkbox" name="time[]" id="time-0" value="Any time">Any Time
                </label>

                <label class="checkbox inline" for="time-1">
                  <input type="checkbox" name="time[]" id="time-1" value="Morning">Morning
                </label>

                <label class="checkbox inline" for="time-2">
                  <input type="checkbox" name="time[]" id="time-2" value="Noon">Noon
                </label>

                <label class="checkbox inline" for="time-3">
                  <input type="checkbox" name="time[]" id="time-3" value="Afternoon">Afternoon
                </label>

                <label class="checkbox inline" for="time-4">
                  <input type="checkbox" name="time[]" id="time-4" value="Evening">Evening
                </label>


              </div>
            </div>

        </div>

        <div class="span11 fix-margin">
            <!-- Textarea -->
            <label for="description">Please describe the nature of your appointment (e.g., consultation, check-up, etc.):</label>
            <textarea id="description" name="description" class="span7" rows="5"></textarea>
        </div>

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

<noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=public_key_here" 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>
        <br>

        <div class="span11 fix-margin">
            <p>Please Note: Messages sent using this form are not considered private.</p>
            <p>Please contact Forum Veterinary Clinic by telephone if sending highly confidential or private information.</p>
        </div>

        <div id="okmessage" class="span4 fix-margin">
            <p>Your message has been sent. Thank you!</p>
        </div>

        <button class="btn btn-theme btn-large" type="submit" id="submit-appoinment">Send Request</button>

    </fieldset>
</form>

Custom.js

$.validator.addMethod("verify", function(value, element, params) {
  return this.optional(element) || value == params[0] + params[1];
}, jQuery.validator.format("Please enter the correct value for 3 + 1"));

$("#appointment").validate({

    rules: {
        name: {
            minlength:3,
        },
        verify:{
            verify:[3, 1]
        },
        email:{
            email: true
        },
        phone:{
            phoneUS: true
        },
        day: { 
                required: true, 
                minlength: 1 
        },
        time: { 
                required: true, 
                minlength: 1 
        },
        recaptcha_response_field:{
            minlength:3
        } 

    },
    messages: {
        day: "Please select at least one day.",
        time: "Please select the prefered time for the appointment.",
        email: "Please enter a correct email address."
    },

    errorPlacement: function(error, element) {
        error.insertAfter(element);
        if ($(".checkboxes1").has(element).size() > 0) {
            error.insertAfter($(".checkboxes1"));
        } 
        if ($(".checkboxes2").has(element).size() > 0) {
            error.insertAfter($(".checkboxes2"));
        }

    },

    submitHandler: function(form) {

    event.preventDefault();
    var Challenge = Recaptcha.get_challenge(); // get the challenge
    var Response = Recaptcha.get_response();   // get the user response 

    $.ajax({
        type: 'POST',
        data: $(form).serialize(),
        url: "/lib/send_email.php",

        success: function() {

            form.reset();

            $('#submit-appoinment').hide();
            $('#okmessage').show().fadeOut(7000, function(){
                $('#submit-appoinment').show();
            });

        }

    });

        //form.submit();
        return false;
    }
});

Verify.php

require_once('recaptchalib.php');
$privatekey = "private_key_here";
$resp = recaptcha_check_answer ($privatekey,
                            $_SERVER["REMOTE_ADDR"],
                            $_POST["recaptcha_challenge_field"],
                            $_POST["recaptcha_response_field"]);

if (!$resp->is_valid) {
// What happens when the CAPTCHA was entered incorrectly
die ("The reCAPTCHA wasn't entered correctly. Go back and try it again." .
     "(reCAPTCHA said: " . $resp->error . ")");
} else {
 // What happens when the CAPTCHA was entered correctly 
}