javascript - Parsley 远程验证码验证

Question

我使用欧芹实现了一个多步骤表单，我需要验证验证码。第一个问题是 recaptcha 是由函数 recaptcha_get_html($publickey) 生成的，因此我无法在 input 元素中手动添加属性。尽管如此，我还是通过在 window.onload() 上使用 .attr() 解决了这个问题，如下所示:

        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');

        };

为了完成验证，我需要向 php 文件传递​​两个字段:recaptchaChallengeField 和 recaptchaResponseField。

正如我所说，这是一个多步骤表单...因此为了验证表单，我将此逻辑附加到“下一步”按钮，并添加了 data-parsley-remote-options，如下所示:

$('.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');
    });

如您所见，recaptchaResponseField 是动态的...每次用户按下“下一步”按钮时我都会捕获该值。

这是我的 php 代码:

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");

问题是它没有做任何事情...在 recaptcha 输入中输入内容时我没有收到任何错误消息。可能是什么问题？我已经尝试使用 parsley.remote.js (.addAsyncValidator) 但也没有发生任何事情......我需要一些帮助。谢谢

Answer 1

我认为您的问题与验证码生成有关。以下行不起作用:

$("#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');

这些属性不与 #recaptcha_response_field 关联，因为该字段是在这些调用之后创建的。您可以查看页面源代码。

一种选择是定义新的自定义主题，以避免自动生成 HTML 代码。 https://developers.google.com/recaptcha/docs/customization?hl=fr