0

嗨，有一个页面，我希望在欧芹表单验证之后出现 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>
4

2 回答 2

0

只需将其添加到表单中。

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

于 2018-08-08T14:39:32.147 回答
0

以下是我在 cgi 脚本实现中解决此问题的方法：

<form id="form" data-parsley-validate="" method=POST ACTION="">

<!--g-recaptcha-->
<div class="g-recaptcha" data-sitekey="YOUR-SITE-KEY" data-callback="recaptchaCallback"></div>

<!-- g-captcha/parsely error notice -->
<input id="myField" data-parsley-errors-container="#errorContainer" data-parsley-required="true"  data-parsley-error-message="Captcha required" value="" type="text" style="display:none;"><span id='errorContainer'></span>

<!--submit-->
<input type="submit" name="submit" value="SUBSCRIBE">


</form>


<script src='https://www.google.com/recaptcha/api.js?onload=reCaptchaCallback&render=explicit'></script>



<script>
var RC2KEY = 'YOUR-SITE-KEY',
    doSubmit = false;

function recaptchaCallback() {
    document.getElementById('myField').value = 'nonEmpty';
}

function reCaptchaVerify(response) {
    if (response === document.querySelector('.g-recaptcha-response').value) {
        doSubmit = true;
    }
}

function reCaptchaExpired () {
    /* do something when it expires */
}

function reCaptchaCallback () {
    /* this must be in the global scope for google to get access */
    grecaptcha.render('id', {
        'sitekey': RC2KEY,
        'callback': reCaptchaVerify,
        'expired-callback': reCaptchaExpired
    });
}

document.forms['form-name'].addEventListener('submit',function(e){
    if (doSubmit) {
        /* submit form or do something else */
    }
})
</script>
于 2019-05-20T17:24:48.110 回答