0

さまざまな理由で変更できない従来のバックエンド コードによって生成されたフォームがあります。フォームは単純な HTML です。

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

送信時にonsubmitパラメータが起動し、すべての必須フィールドが入力されていることを確認します。これには、 check_theform()「プレーン バニラ」JavaScript (つまり、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()で 2 回目の実行が実行されることです。フォーム エラーがある場合、これらが 2 回表示されるようになりました。

check_theForm()フォームの HTML コードまたは を変更せずに、これらが変更できない従来のバックエンド コードによって生成されていることを確認して、この重複を防ぐにはどうすればよいですか?

4

1 に答える 1