首页 > 解决方案 > 使用 Parsley 的 Google reCaptcha 无法正常工作

问题描述

嗨,有一个页面,我希望在欧芹表单验证之后出现 recaptcha,但首先进行 recaptcha 验证,然后再次进行表单验证 recaptcha 出现

任何帮助将不胜感激。

<html>
<head>
  <title>reCAPTCHA demo: Simple page</title>
  <script src="http://parsleyjs.org/dist/parsley.js"></script>
  <script src="https://www.google.com/recaptcha/api.js"></script>
</head>

<body>
  <form action="?" method="POST" data-parsley-validate id="contactForm">
    <input type="email" data-parsley-required />
    <div class="g-recaptcha" data-sitekey="my_site_key" 
         data-callback="captchaCallback"></div>
    <br/>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

<script>
 $('#contactForm').parsley().on('field:validated', function() {
        var ok = $('#contactForm').find('.parsley-error').length === 0;
        $('#contactForm').find('.bs-callout-warning').toggleClass('hidden', ok);
        $('#contactForm .contact-success-msg').addClass('hide');

    })
        .on('form:submit', function() {
    //ajax function
}
   });
</script>

<script>
function hello() {
        var a = $('form');
        $(a).each(function() {
            var b = $(this).find('.submit-contact-form');
            $(b).unbind().click(function(e) {
                e.preventDefault();

                grecaptcha.reset();
                grecaptcha.execute();
                abc = $(this);

            });
        });
}
</script>

标签: jqueryjquery-pluginsrecaptchaparsley.jsinvisible-recaptcha

解决方案


只需将其添加到表单中。

数据-欧芹-排除=“输入[名称=g-recaptcha-response],输入[id=recaptcha-token]”


推荐阅读