Объединение параметра onsubmit формы с обработчиком событий отправки jquery - PullRequest
Новая
       40

Объединение параметра onsubmit формы с обработчиком событий отправки jquery

0 голосов
/ 15 октября 2019

У меня есть форма, генерируемая устаревшим внутренним кодом, которую я не могу изменить по разным причинам. Форма проста 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() запускается во второй раз. Если есть ошибки формы, они теперь отображаются дважды.

Как я могу предотвратить это дублирование, не внося изменений в HTML-код формы или в check_theForm(), поскольку они генерируются устаревшим внутренним кодомчто я не могу изменить?

1 Ответ

1 голос
/ 15 октября 2019

Если у вас есть 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();
      });;
  });
});
...