如何在 Getform 和 Ajax 表单提交中使用 hCaptcha 回调？

Question

我正在使用 Getform https://getform.io/ 以及 hCaptcha hcaptcha.com 作为 Javascript 联系表单。 GetForm 完全支持 hCaptcha https://docs.getform.io/features/spam-filtering/hcaptcha/ 。但 Getform 或 hCaptcha 都不提供代码级别的支持，因此，我在这里询问。

我正在使用 Getform Ajax 表单，它可以在表单提交后使用户保持在同一页面上。它非常基础，来自 Getform 的剪切和粘贴示例。我为每个字段使用“必需”属性，并且 Getform 会自动验证这些属性，并且在所有字段都验证之前不允许单击表单按钮提交。表单和必填字段有效，并且在未集成 hCaptcha 时提交表单。

但是我想做的是集成hCaptcha并自动将hCaptcha质询绑定到提交按钮，因此hCaptcha仅在单击提交按钮后出现。

为此，我需要回调，如此处所述 https://docs.hcaptcha.com/invisible#programmatically-invoke-the-challenge回调基本上是这样的：

function onSubmit(token) {
    document.getElementById('ajaxForm').submit();
  }

但是我添加的回调不适用于 Ajax 函数。使用下面的代码，单击表单提交按钮时会出现 hCaptcha，解决后，表单就会提交。 Getform 日志显示 hCaptcha 已解决，并且在 Getform 处收到消息，但由于在表单提交之前不会进行表单字段验证，因此如果提交时将必填表单字段留空，则消息中的必填表单字段可能会为空。

问题：如何在下面的 jQuery Ajax 函数中使用

function onSubmit(token)

（或不同的函数），因此顺序是这样的：如果没有所需的表单字段，则无法单击提交，并且在填写这些字段时，无法单击提交点击提交，就会出现hCaptcha，如果hCaptcha成功解出，则最终通过

post

提交表单。

HTML：

<div class="form-container">

<form  id="ajaxForm" accept-charset="UTF-8"  action="https://getform.io/f/form-id" method="POST">

<label for="email" required="required">Your Email</label><br>
<input type="email" name="email" class="form-control" id="email"  aria-describedby="emailHelp" placeholder="Enter email" required="required">

<label for="name">Your Name</label><br>
<input type="text" name="name" class="form-control" id="name" placeholder="Enter name" required="required">

<label for="name">Your Message</label>
<textarea cols="50" rows="5" name="message" class="form-control" id="message" placeholder="Enter Message" required="required" minlength="20" maxlength="500"></textarea>

<button class="h-captcha" data-sitekey="site-key" data-callback="onSubmit" type="submit">Submit</button>

</form>

<div class="success">Message sent OK!</div>

</div>

Javascript：

jQuery('.success').removeClass('is-active');  // Hide div on page load

jQuery("#ajaxForm").submit(function(e){
  e.preventDefault();
  var action = jQuery(this).attr("action");
  jQuery.ajax({
    type: "POST",
    url: action,
    crossDomain: true,
    data: new FormData(this),
    dataType: "json",
    contentType: "multipart/form-data",
    processData: false,
    contentType: false,
    headers: {
      "Accept": "application/json"
    }

  }).done(function() {
    jQuery('.success').addClass('is-active');  // Shows sucess div
    jQuery("button[type='submit']").prop('disabled',true); //Disabled button to prevent multiple submits
    $("#ajaxForm :input").val('');          //clears form fields after submit

  }).fail(function() {
     alert('Something broke - you should try again');
  });
});

function onSubmit(token) {
    document.getElementById('ajaxForm').submit();   // Callback as required by Hcaptcha, which doesn't work
  }

Answer 1

这超出了我的想象，但是这样的东西有用吗？

function onSubmit(token) {
    event.preventDefault();
    //validate form
    $("#ajaxForm").validate();
    //check form is valid
    if ($("#ajaxForm").valid()) {
        //if form is valid call captur challange 
        hcaptcha.execute();
    } else {
        // feed back to user if form is invalid i.e. a display message 
    }
}


hcaptcha.execute(widgetID, { async: true })
    .then(({ response, key }) => {
        console.log(response, key);
        //use capture callback function submit form if capture challamge passes
        SubmitData();
    })
    .catch(err => {
        console.error(err);
    });

    
function SubmitData() {
    var action = $("#ajaxForm").attr("action");
    jQuery.ajax({
        type: "POST",
        url: action,
        crossDomain: true,
        data: new FormData($("#ajaxForm")),
        dataType: "json",
        contentType: "multipart/form-data",
        processData: false,
        contentType: false,
        headers: {
            "Accept": "application/json"
        }

    }).done(function () {
        jQuery('.success').addClass('is-active');  // Shows sucess div
        jQuery("button[type='submit']").prop('disabled', true); //Disabled button to prevent multiple submits
        $("#ajaxForm :input").val('');          //clears form fields after submit

    }).fail(function () {
        alert('Something broke - you should try again');
    });
}