荷兰芹远程重新验证

Question

I implemented a multistep form using parsley and I need to validate a recaptcha. The first problem is that the recaptcha is generated by the function recaptcha_get_html($publickey) , so I cannot add attributes manually within the input element. Nonetheless I solved that using .attr() on window.onload() as follows:

        window.onload = function() {
            $("#recaptcha_response_field").attr('data-parsley-group','block1');
            $("#recaptcha_response_field").attr('data-parsley-required','true');
            $("#recaptcha_response_field").attr('data-parsley-remote-message','Wrong Captcha');
            $("#recaptcha_response_field").attr('data-parsley-remote','lib/validateRecaptcha.php');

        };

To accomplish the validation I need to pass to the php file two fields: recaptchaChallengeField and recaptchaResponseField.

As I said, it is a multi step form... so to validate the form I have this logic attached to the "next" button, and I added the data-parsley-remote-options as follows:

$('.next').on('click', function () {

      var current = $(this).data('currentBlock'),
      next = $(this).data('nextBlock');

      $("#recaptcha_response_field").attr('data-parsley-remote-options','{"type": "POST", "dataType": "jsonp", "data": {"recaptchaChallengeField": "'+$("#recaptcha_challenge_field").val()+'", "recaptchaResponseField": "'+$("#recaptcha_response_field").val()+'"}}');


      // only validate going forward. If current group is invalid, do not go further
      // .parsley().validate() returns validation result AND show errors
      if (next > current)
        if (false === $('#signup-form').parsley().validate('block' + current))
          return;

// validation was ok. We can go on next step.
      $('.block' + current)
        .removeClass('show')
        .addClass('hidden');

      $('.block' + next)
        .removeClass('hidden')
        .addClass('show');
    });

As you can see, the recaptchaResponseField is dynamic... I catch the value everytime the user press the "next" button.

Here is my php code:

require_once('recaptcha-php-1.11/recaptchalib.php');
          $privatekey = "private_key";
          $resp = recaptcha_check_answer ($privatekey, $_SERVER["REMOTE_ADDR"], $_POST["recaptchaChallengeField"], $_POST["recaptchaResponseField"]);

          if (!$resp->is_valid)
            echo json_encode("404");
          else
            echo  json_encode("200");

The problem is that its not doing anything... I dont get any error message when typing something within the recaptcha input. What can be the problem? I already tried using parsley.remote.js (.addAsyncValidator) but nothing happens aswell... I need some help please. Thx

Answer 1

I think that your problem is linked to the CAPTCHA generation. The following lines do not work:

$("#recaptcha_response_field").attr('data-parsley-group','block1');
$("#recaptcha_response_field").attr('data-parsley-required','true');
$("#recaptcha_response_field").attr('data-parsley-remote-message','Wrong Captcha');
$("#recaptcha_response_field").attr('data-parsley-remote','lib/validateRecaptcha.php');

These attributes are not associated to the #recaptcha_response_field because the field is created after these calls. You can check in the page source code.

One option is to define a new custom theme in order to avoid automated generation of the HTML code. https://developers.google.com/recaptcha/docs/customization?hl=fr