さまざまな理由で変更できない従来のバックエンド コードによって生成されたフォームがあります。フォームは単純な 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 コードまたは を変更せずに、これらが変更できない従来のバックエンド コードによって生成されていることを確認して、この重複を防ぐにはどうすればよいですか?