如何将hCaptcha回调与Getform及Ajax表单提交结合使用？

问题背景 #

用Getform搭建无跳转的Ajax联系表单，已添加原生required属性做必填字段验证，现在要集成hCaptcha。当前问题是：点击提交按钮直接触发hCaptcha，跳过了原生必填项验证，导致空字段也能提交。需要实现的流程：

• 必填字段未填完时，提交按钮无法触发任何操作
• 字段填写完整后，点击提交触发hCaptcha验证
• hCaptcha验证通过后，通过Ajax提交表单到Getform

修改后的HTML代码 #

<div class="form-container">
  <form id="ajaxForm" accept-charset="UTF-8" action="https://getform.io/f/form-id" method="POST">
    <label for="email">Your Email</label><br>
    <input type="email" name="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" required>

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

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

    <!-- 把type从submit改成button，避免默认表单提交触发 -->
    <button class="h-captcha" data-sitekey="site-key" data-callback="onCaptchaSuccess" type="button">Submit</button>
  </form>
  <div class="success">Message sent OK!</div>
</div>

修改后的JavaScript代码 #

jQuery(document).ready(function() {
  jQuery('.success').removeClass('is-active'); // 页面加载时隐藏成功提示

  // 提交按钮点击事件：先做原生表单验证，再触发hCaptcha
  jQuery(".h-captcha").click(function() {
    const form = document.getElementById('ajaxForm');
    // 触发原生表单验证，若不通过则自动提示用户补全
    if (!form.checkValidity()) {
      form.reportValidity();
      return;
    }
    // 验证通过，触发hCaptcha挑战
    hcaptcha.execute();
  });

  // hCaptcha验证成功后的回调：执行Ajax提交
  window.onCaptchaSuccess = function(token) {
    const form = document.getElementById('ajaxForm');
    const action = jQuery(form).attr("action");
    
    jQuery.ajax({
      type: "POST",
      url: action,
      crossDomain: true,
      data: new FormData(form),
      dataType: "json",
      processData: false,
      contentType: false, // 注意：原代码重复设置了contentType，已删除重复项
      headers: {
        "Accept": "application/json"
      }
    }).done(function() {
      jQuery('.success').addClass('is-active');
      jQuery("button[type='button']").prop('disabled', true);
      jQuery("#ajaxForm :input").val('');
    }).fail(function() {
      alert('提交失败，请重试');
      // 重置hCaptcha，方便用户再次尝试
      hcaptcha.reset();
    });
  };
});

关键修改说明 #

1. 按钮类型调整：将提交按钮的type="submit"改为type="button"，避免点击时直接触发表单默认提交，确保先执行自定义验证逻辑。
2. 原生验证前置：点击按钮后先调用form.checkValidity()和form.reportValidity()触发原生必填项验证，不通过则终止流程并提示用户。
3. hCaptcha触发方式：原生验证通过后，调用hcaptcha.execute()手动触发hCaptcha挑战，而不是依赖按钮的默认行为。
4. 回调逻辑重构：hCaptcha验证成功后，直接在回调中执行Ajax提交，而非调用form.submit()（会触发默认表单提交，绕过Ajax逻辑）。
5. 修复Ajax配置：删除原代码中重复的contentType设置，避免请求头冲突。

内容的提问来源于stack exchange，提问作者user5853892