在获取数据之前不可见的 recaptcha 提交表单

Question

我正在使用验证码gem。 Rails5.2.

我有以下表格：

= 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'

我为表格添加了以下 javascript：

javascript:


  document.getElementById('submit-btn').addEventListener('click', function (e) {
      e.preventDefault();
      grecaptcha.execute();
  });

  var submitInvisibleRecaptchaForm = function () {
    document.getElementById("invisible-recaptcha-form").submit();
  };

我在我的控制器中检查 recaptcha 的值如下：

  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

只要我使用 e.preventDefault(); 就可以了；线。如果我删除此行，我会遇到 recaptcha 失败，我可以在参数中看到 recaptcha attriburte 正在发送空白数据。

我不明白为什么我需要它，因为文档的 none 指定了它。所以我做错了什么，但我想不通。

任何人都可以看到我如何解决这个问题吗？

Answer 1

您需要 e.preventDefault() 语句，否则将在 recaptcha 执行回调之前提交表单。

发生这种情况是因为 <button> with no type attribute has submit as the default value/ behavior. If you look at recaptcha documentation，<button> 标签具有定义为 button 的 type 属性，它没有关联的行为，因此单击它时不会发生任何操作。

回到你的案例，要么保留 e.preventDefault() 声明，要么将 type 属性设置为 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'