Question

我想阻止用户提交表单，除非选中reCaptcha。

问题是显示验证错误消息，但即使检查了reCaptcha，我的表单也不会提交。我检查了控制台，我没有看到任何与众不同的东西。

我的HTML代码是：

<form id="myform>

<input type="hidden" class="hiddenRecaptcha required" name="hiddenRecaptcha" id="hiddenRecaptcha">
<div class="g-recaptcha" data-sitekey="{YOUR-SITE-KEY-HERE}"></div>

 <!-- These are the fields I want ignored -->
  <input type="hidden" id="email" name="email" value="" class="ignore>

  <input type="hidden" id="one" class="ignore">

  <input id="template_id" name="template" class="ignore"  />

  <button class="button-large-red " id="submitB" type="submit">Submit</button>
  </form>

我的验证码是：

            var $form = $("#myform"),
            $successMsg = $(".alert");

            $form.validate({
             ignore: ".ignore",
              rules: {
                firstname: {
                  required: true,
                  minlength: 0,
                  letters: true
                },

              "hiddenRecaptcha": {
                   required: function() {
                       if(grecaptcha.getResponse() == '') {
                           return true;
                       } else {
                           return false;
                       }
                   }
              },

              messages: {
                firstname: "Please place your first name",
                lastname: "Please place your last name",

              },

Answer 1

谷歌recaptha在iframe运行，有textarea：
<textarea id="g-recaptcha-response" name="g-recaptcha-response" class="g-recaptcha-response" style="width: 250px; height: 40px; border: 1px solid #c1c1c1; margin: 10px 25px; padding: 0px; resize: none; display: none; "></textarea>

当检查“我不是机器人”时，这个textarea值将是这样的：

03AMPJSYUDBQ2JpUn7VdJbLQKUdDjG01rmgK_u2mEeGeccdNPiQom-D15JEs9pJNjwycHN86H9J7-G54hjvI9TRBAslHwJHOx3hnE1dwjlivgWlFLgt79SamJPcKufW3DnDjmeVKMVCSPXiHvc60hHKfBzgdJdVVJnm8esXIUjLroAPrRl1HqDWuYWuMZBAWHWyjXpXerb30FCIEHHN2DPUmwHiRDTs6PqIGYC-6NFtE2xDk-25giypzTGojuaaP5V1RLJ8F0TMfSbkcBbNtcD_1CRd6icxCzIwZKXUlhtxQKDXLerxdER8lkiKXtBM2tdBarojcT2rkSdvxqIcrseonIe8GbB1fa7U-Ni1Nq2NtEm7fzgW9Kog9qjRGOu5SJWnMwAT3LWt6dUayoy642Gi9YXDaF-b_Lq1O8ADNvAnyaFW7xyMKwSSDM

简单而愚蠢的方法，检查这个textarea值的长度。

 if(!!$('#g-recaptcha-response').val().length) {
   //do something
 }

但是有更好的方法，你可以提供更多的信息 google's docs

Answer 2

您可以检查验证码中textarea的值，并为jQuery验证创建自定义方法/规则：

jQuery.validator.addMethod('recaptcha', function(value, element) {
  return $('#captcha-is-valid').val().length > 0;
}, 'Please enter correct value for captcha');

function setRecaptchaFormValue(token) {
  $('#captcha-is-valid').val(token);
}

您将使用隐藏元素和来自recaptcha的回调来设置值，隐藏元素将使用我们的新规则进行验证：

<form id="myForm">
  <div class="g-recaptcha" data-sitekey="your_site_key" data-callback="setRecaptchaFormValue"></div>
  <input id="captcha-is-valid" type="hidden" value="" recaptcha />
</form>

From the Google documentation for recaptcha，当成功输入验证码时，将调用回调并a new hidden form field named g-recaptcha-response will be added。提交表单时，您需要服务器端API仔细检查是否正确输入了验证码。

如何使用jQuery Validation插件进行reCaptcha？

2 个答案: