V2 - Invisible not working in development mode

[cpattersonit]

When trying to use the ReCaptchaV2Invisible widget with the test keys, I get the following result in the console::

Uncaught (in promise) null

[cpattersonit]

I get the same result when using real API keys.

[dest81]

@cpattersonit I had the same but I am using ajax form in modal window. To solve the issue I rewrote javascript code in the js_v2_invisible.html. If you submit form with js you have to change submit handler.

[cpattersonit]

@dest81 That makes sense in that scenario. However, I am not using Ajax. It fails when I use a simple form with an HTML submit button.

[minyor]

Same problem here.

class SigninForm(AuthenticationForm):
captcha = ReCaptchaField(
widget=ReCaptchaV2Invisible(
attrs={
'data-size': 'compact',
}
)
)

input type="submit" name="submit" class="log_submit" value="Log In"

Getting the foloving in firefox:

reCAPTCHA validated for 'data-widget-uuid="5de295ed5160456994e37cb21903b1b2"'. Submitting form... 0.0.0.0:8081:257:17
uncaught exception: null

ReCaptchaV2Checkbox works as excpected
Help?

[engin-can]

Same happening here. Any fix???

[DragosChirila]

Make sure reCAPTCHA's type is v2 Invisible.

Trying ReCaptchaV2Invisible with a reCAPTCHA of type v2 Checkbox, will lead to Uncaught (in promise) null.

Also, please make sure you have added your development domain to the list of domains (e.g. if testing it from your localhost, then add localhost and 127.0.0.1 to the list of domains.)

Hope this helps.

[cspollar]

@minyor - It looks like you may be having the same problem I was having earlier. In my case, the promise was hiding the true error -form.submit is not a function.

My input's name caused the conflict - changing <input type="submit" name="submit" value="Submit"> to <input type="submit" name="submit_my_form" value="Submit"> resolved the error.

I'm using django-crispy-forms, so I just needed to change from Submit('submit', 'Submit') to Submit('submit_my_form', 'Submit').

[nftchance]

For those of you using crispy forms, make sure that you aren't using crispy forms on the captcha field.

I was using:

{% for field in form %}
        {{ field|as_crispy_field }}
{% endfor %}

But updated it to:

{{ form.from_email|as_crispy_field }}
{{ form.subject|as_crispy_field }}
{{ form.message|as_crispy_field }}

<div class="form-group">
    {{ form.captcha }}
</div>

With this in my form:

captcha = ReCaptchaField(
    public_key=settings.RECAPTCHA_PUBLIC_KEY,
    private_key=settings.RECAPTCHA_PRIVATE_KEY,
)

All-in-all a pretty straightforward fix to those experiencing issues and trying to use django-crispy-forms.

[nicksce]

I have implemented django-crispy form with django-recaptcha in an ajax form. My implementation is as below:

1. Use label=False in the form. This hides the captcha field from the HTML form.
2. Use Form-Helper for the custom rendering of the form.
3. Use a callback function on onload with the recaptcha api.js to handle the form submit event.
4. Verify recaptcha token manually on the serverside when after the form is submitted.

I know my reply is very abstract. Provide the code of your implementation for an exact answer.

[itemir]

I had a similar problem. Following @cspollar 's suggestion changed <button id="submit"> to <button id="submitForm">. It seems to be causing a conflict.

[thibaudcolas]

I will move this to Discussions as it seems more of a "how to make this work" than "there’s something to fix in the package". Let me know if I got that wrong.