Question

我正在使用Recaptcha宝石。 Rails 5.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属性正在发送空白数据。

我不明白为什么我需要它，因为没有文档指定它。所以我在做错事，但我无法弄清楚。

谁能看到我该如何解决这个问题？

Answer 1

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

之所以会这样，是因为没有{strong> type 属性的<button>具有submit作为默认值/行为。如果您查看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'

获取数据之前提交的隐形Recaptcha表单

1 个答案: