My website has a form that is automatically generated by older server-side code. Unfortunately, I am unable to make any modifications to this legacy code for various reasons. The form itself is written in straightforward HTML:
<form action="#" id="theForm" onsubmit="return check_theForm(); method="post">
<!-- fields go here -->
</form>
Upon submission of the form, the onsubmit parameter triggers and calls the check_theForm() function, which uses pure JavaScript (no jQuery involved) to ensure that all required fields have been completed.
Now, my goal is to integrate reCAPTCHA V3 into this form. To achieve this, I've added the following script:
$('#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();
});;
});
});
The problem arises because the onsubmit parameter of the form fires before the
$('#theForm').submit(function(event)check_theForm() to be executed twice. As a result, if there are any errors in the form, they will appear duplicated.
I'm looking for a solution to prevent this duplication issue without modifying the form's HTML or altering the check_theForm() function. It is crucial to note that these components are generated by legacy server-side code, which I don't have authorization to edit.