I am using the recaptcha gem. Rails 5.2.
I have the following form:
= simple_form_for @quote_request_form, url: quote_requests_path, html: {id: "invisible-recaptcha-form"} do |f|
.form-group
= f.input :name, label: false, placeholder: 'First and Last Name',
.form-group.actions.mt-5
button.btn.btn-primary.btn-lg.btn-block#submit-btn Submit
= invisible_recaptcha_tags ui: :invisible, callback: 'submitInvisibleRecaptchaForm'
I have added the following javascript for the form:
javascript:
document.getElementById('submit-btn').addEventListener('click', function (e) {
e.preventDefault();
grecaptcha.execute();
});
var submitInvisibleRecaptchaForm = function () {
document.getElementById("invisible-recaptcha-form").submit();
};
I check the value from the recaptcha in my controller as follows:
if verify_recaptcha(model: @quote_request_form) && @quote_request_form.save
redirect_to quote_confirm_path, notice: "Your quotation request is being processed"
else
render :new
end
It all works as long as I use the e.preventDefault(); line. If I remove this line I get a failure with the recaptcha and I can see in the parameters that the recaptcha attriburte is sending in blank data.
I don't understand why I need it as none of the documentation specify it. So I'm doing something wrong but I can't figure it out.
Can anyone see how I can fix this?
To invoke the invisible reCAPTCHA, you can either: Automatically bind the challenge to a button or. Programmatically bind the challenge to a button or. Programmatically invoke the challenge.
If you've added reCAPTCHA to your website or mobile app, you must include a Privacy Policy. ReCAPTCHA is a Google service that collects the personal information of users when it is integrated into a website or app to protect against bots.
In short, yes they can. While reCAPTCHA v2 and v3 can help limit simple bot traffic, both versions come with several problems: User experience suffers, as human users hate the image/audio recognition challenges. CAPTCHA farms and advances in AI allow cybercriminals and advanced bots to bypass reCAPTCHAs easily.
The site key is used to invoke reCAPTCHA service on your site or mobile application. The secret key authorizes communication between your application backend and the reCAPTCHA server to verify the user's response. The secret key needs to be kept safe for security purposes.
You need the e.preventDefault()
statement otherwise the form will be submitted before recaptcha executes the callback.
This happens because <button>
with no type attribute has submit
as the default value/ behavior. If you look at recaptcha documentation, the <button>
tag has the type attribute defined as button
, which has no behavior associated, thus no action happens when you click at it.
Returning to your case, either you keep the e.preventDefault()
statement or you set the type attribute as button
:
.form-group.actions.mt-5
button.btn.btn-primary.btn-lg.btn-block#submit-btn type="button" Submit
= invisible_recaptcha_tags ui: :invisible, callback: 'submitInvisibleRecaptchaForm'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With