improvements for invisible_recaptcha_tags?
#220
Comments
|
I think it's easy enough ... automating JS is rarely fun ... |
|
What do you think about adding a default for when there is no option passed? Here is something that has come to my mind: // app/assets/javascripts/application.js
//= require recaptcha<%= form_for @foo do |f| %>
<!-- other form fields -->
<%= invisible_recaptcha_tags %> <!-- no options passed, no button generation. -->
<%= f.submit 'Save' %>
<% end %>The recaptcha.js would be a new file included in the gem. It would contain some js functions to stop the form on submit, wait for Google's reCAPTCHA verification response, and then it resumes the submission. Just an idea. |
|
sounds good ... maybe make it |
|
I can try to work on this on my free time. Though if someone else wants to take a stab, be my guest. |
|
I'd really like to see this. I was looking for a way to do something like this with the existing tag already. |
This is a work in progress commit and looking for some ideas. It is working towards the first part of ambethia#220. This adds a default callback that calls the function `invisibleRecaptchaSubmit` if no callback was passed to `invisible_recaptcha_tags` The drawback to this approach is that it won't work if there are multiple recaptcha forms.
This adds a default callback that calls the function `invisibleRecaptchaSubmit` if no callback was passed to `invisible_recaptcha_tags`. The function, `invisibleRecaptchaSubmit`, uses the `closest()` method to find the closest form to the `.g-recaptcha` element. However, not all browsers support `closest()`, so in that case, a polyfill of `closest` is executed. The polyfill is based on MDN's polyfill suggestion which should support IE9+ https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill The drawback to this approach is that it won't work if there are multiple recaptcha forms. If you want to use invisible_recaptcha_tags with multiple forms, you would still need to use custom callbacks.
This adds a default callback that calls the function `invisibleRecaptchaSubmit` if no callback was passed to `invisible_recaptcha_tags`. The function, `invisibleRecaptchaSubmit`, uses the `closest()` method to find the closest form to the `.g-recaptcha` element. However, not all browsers support `closest()`, so in that case, a polyfill of `closest` is executed. The polyfill is based on MDN's polyfill suggestion which should support IE9+ https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill The drawback to this approach is that it won't work if there are multiple recaptcha forms. If you want to use invisible_recaptcha_tags with multiple forms, you would still need to use custom callbacks.
This adds a default callback that calls the function `invisibleRecaptchaSubmit` if no callback was passed to `invisible_recaptcha_tags`. It will traverse the DOM upwards to find the closest form to submit. The drawback to this approach is that it won't work if there are multiple recaptcha forms. If you want to use invisible_recaptcha_tags with multiple forms, you would still need to use custom callbacks.
Add default callback for invisible recaptcha #220
|
This helped me a lot as a first time user, seeing that empty thing there, thanks! |
|
I'll close this issue now since #238 pretty much solved the pain that this issue was surfacing. |
Thanks @juampi for originally implementing
invisible_recaptcha_tags! I was able to successfully get it to work on my app.Now, I'm wondering if
invisible_recaptcha_tagspublic api has diverged too much from the original intention?The two things you must do differently from
recaptcha_tagsare:You must specify a callback function, which would be called after verification with Google's reCAPTCHA service. Ideally, this callback function would submit the actual form.
The invisible_recaptcha_tags will generate a submit button for you. You should not need to add a f.submit or submit_tag to your form.
Do you think we should automate the callback of the form submission and to remove the generation of the submit button?
The text was updated successfully, but these errors were encountered: