将表单 onsubmit 参数与 jquery 提交事件处理程序相结合

Question

我有一个由遗留后端代码生成的表单，由于各种原因，我无法更改。形式很简单 HTML:

<form action="#" id="theForm" onsubmit="return check_theForm(); method="post">
  <!-- fields go here -->
</form>

在提交时触发 onsubmit 参数以验证是否已填写所有必填字段，使用包含 "plain vanilla" javascript 的 check_theform() 函数（即没有 jQuery代码）。换句话说，基本的东西。

我现在尝试通过添加以下内容将 reCAPTCHA V3 添加到此表单：

$('#theForm').submit(function(event) {
  event.preventDefault();
  grecaptcha.ready(function() {
    grecaptcha.execute('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      {action: 'contactForm'}).then(function(token) {
        $('#theForm').prepend('<input type="hidden" name="token" value="' + token + '">');
        $('#theForm').prepend('<input type="hidden" name="action" value="contactForm">');
        $('#theForm').unbind('submit').submit();
      });;
  });
});

问题是表单的 onsubmit 参数首先触发，运行 check_theForm()，然后触发 $('#theForm').submit(function(event) 处理程序，最终运行 $('#theForm').unbind('submit').submit(); check_theForm() 第二次运行。如果存在表单错误，现在会显示两次。

如何在不更改表单的 HTML 代码或 check_theForm() 的情况下防止这种重复，因为这些是由我无法更改的遗留后端代码生成的？

Answer 1

当您有 onsubmit="x()" 时，您可以使用

删除 html onsubmit 处理程序

$("#id").attr("onsubmit", null);

允许您在没有自己的事件处理程序的情况下完全控制。

在这种情况下，给出：

$("#theForm").attr("onsubmit", null);

$('#theForm').submit(function(event) {
  event.preventDefault();
  grecaptcha.ready(function() {
    grecaptcha.execute('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
      {action: 'contactForm'}).then(function(token) {
        $('#theForm').prepend('<input type="hidden" name="token" value="' + token + '">');
        $('#theForm').prepend('<input type="hidden" name="action" value="contactForm">');
        if (check_theForm())
            $('#theForm').unbind('submit').submit();
      });;
  });
});

将表单 onsubmit 参数与 jquery 提交事件处理程序相结合

Combining form onsubmit parameter with jquery submit event handler

jquery

forms

event-handling

onsubmit

recaptcha-v3