Intergating with recaptcha

[simondoescode]

How can I detect if Google's recaptcha has given the all clear to the user and affect the state of the submit button?

[boxdoor]

Did you find an answer? Would love to know how to get it working.

[mikemix]

1. Add text input near the reCaptcha element, leave it empty and mark as required, style it as visibility: hidden; height: 1px
2. Specify the callback the reCaptcha API should invoke should user pass the challenge
3. In the callback populate the field from no.1 with any value

Simple & working workaround :) Example:

<div class="form-group">
    <label for="">Check "I am human" below <span class="required">*</span></label>
    <input type="text" name="recaptcha" required value="" id="recaptchaValidator" pattern="1" data-error="Check `I am human` !" style="visibility: hidden">
    <div class="g-recaptcha" data-sitekey="your-public-key" data-callback="captcha_onclick"></div>
    <p class="help-block with-errors">Prove you are a human!</p>

    <script>
        function captcha_onclick() {
            $('#recaptchaValidator').val(1);
        }
    </script>
</div>

[davidnewcomb]

Your code didn't work. After recaptcha calls captcha_onclick() the form is not revalidated and the submit button is not enabled. You must call the validator explicitly.

<script>
function captcha_onclick(e) {
    $('#recaptchaValidator').val(1);
    $('#my-form').validator('validate');
}
</script>

<form id="my-form" method="POST" action="/form.php" data-toggle="validator" role="form">
    <div class="form-group">
        <label for="recaptchaValidator">Prove you're not a robot!</label>
        <input type="text" name="recaptcha" value="" id="recaptchaValidator" pattern="1" data-error="Sorry, no robots!" style="visibility: hidden; height: 1px" required>
        <div class="g-recaptcha" data-sitekey="your-public-key" data-callback="captcha_onclick"></div>
        <div class="help-block with-errors"></div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>
</form>

[davidnewcomb]

I was surprised that calling $('#recaptchaValidator').val(1); did not call the validator() automatically. I think there is a missing listener in the code so perhaps this is a bug after all.

Also, the documentation on page http://1000hz.github.io/bootstrap-validator/#validator-methods states that you must call $().validator('validate') when in fact you must call $("selector").validator('validate').
It might be obvious to some people but it (needlessly) tripped me up.
The same probably true for the other methods in that section of the documentation.

[1000hz]

That section of the docs was following the same convention as the Bootstrap docs, but looking now it seems they have changed it to leave off the potentially confusing $(). I'll update the docs.

[mikemix]

Code is working for me so...

[Augustin-FL]

There is still a problem with the code above

Putting $('#my-form').validator('validate') after $('#recaptchaValidator').val(1)will validate the ENTIRE form (which mean : display warnings for all fields which have not got the focus yet), like this :

(on the image below, i just clicked on the captcha, the other inputs remained untouched)

[Augustin-FL]

I found a solution (using #326 ) : $('#recaptchaValidator').val(1).trigger('input');. It validate the hidden field (and only the hidden field).

[davidnewcomb]

I can live with validating the entire form, it is better than not validating the recatcha field! Strange that it seems to work for @mikemix but not us. I'll be publishing my site soon so will be able to show you it not working!

[tuannguyenminh2086]

I found the solution for that:
<script> function captcha_onclick(response) { $('#recaptchaValidator').val(1); $('input#txtEmail').blur(); } </script>

[1000hz]

Here's an example of reCAPTCHA working with the plugin:
http://jsbin.com/kirevujexa/edit?html,js,output