Остановить отправку формы до проверки

У меня есть форма, структурированная следующим образом.

<form id="email_subscription_form" class="form-inline float-right" method="post" action="/my-endpoint/">
   <div class="form-group">
      <label for="id_email_address" class="d-none">Email Address</label>
      <input type="email" id="id_email_address" class="form-control border-0 rounded-0" name="email_address" value="" placeholder="Email Address">
      <input type="hidden" name="mailpiece_slug" value="{{ page.settings.email_newsletter_slug }}" />
      <input type="hidden" name="event_slug" value="subscribe" />
   </div>
</form>

Также у меня есть скрипт в нижней части файла. Смысл скрипта заключается в проверке recaptcha перед отправкой формы. Вот мой скрипт.

<script>
    document.getElementById('email_subscription_form').addEventListener('submit', verifyRecaptcha);
    
    function verifyRecaptcha(e) {
        e.preventDefault()
        return false
    }
</script>

Я думал, основываясь на некоторых исследованиях, что функция, возвращающая false, остановит отправку формы. Однако форма все равно отправляется и попадает в конечную точку.

Я также пробовал следующее: 

<form id="email_subscription_form" class="form-inline float-right" method="post" action="/my-endpoint/" onsubmit="return verifyRecaptcha()">

и 

<form id="email_subscription_form" class="form-inline float-right" method="post" action="/my-endpoint/" onsbubmit="return false">

но форма все равно отправляется.

Что я могу сделать, чтобы форма не отправлялась до проверки? Это проект Django, поэтому шаблон - это шаблон Django.

Я провел некоторое исследование и в форме есть параметр onsubmit="", в который можно вписать вызов функции проверки, как это уже сделано в verifyRecaptcha(e). Насколько я могу судить, часть return false должна остановить форму, возможно, это потому, что вы не используете onsubmit="verifyRecaptcha(e)" в теге открытия формы. Поэтому прямой скрипт onload не работает. Ваш код должен выглядеть следующим образом:

html:

<form id="email_subscription_form" onsubmit="verifyRecaptcha(e) class="form-inline float-right" method="post" action="/my-endpoint/">
   <div class="form-group">
      <label for="id_email_address" class="d-none">Email Address</label>
      <input type="email" id="id_email_address" class="form-control border-0 rounded-0" name="email_address" value="" placeholder="Email Address">
      <input type="hidden" name="mailpiece_slug" value="{{ page.settings.email_newsletter_slug }}" />
      <input type="hidden" name="event_slug" value="subscribe" />
   </div>
</form>

js:

<script>
    function verifyRecaptcha(e) {
        e.preventDefault()
        return false
    }
</script>

Я настоятельно рекомендую вам изучить, как django может помочь вам с формами: работа с формами.

Встроенное в django управление формами уже имеет все необходимые функции, такие как валидация, и позволяет вам сосредоточиться на других вещах. Кроме того, вы все еще можете добавлять свой JS как обычно.

Смотрите вышеуказанную ссылку на документацию и следующий пример, чтобы получить некоторое представление: 

from django import forms
from django.core.exceptions import ValidationError

class ContactForm(forms.Form):
    # Everything as before.
    ...

    def clean_recipients(self):
        data = self.cleaned_data['recipients']
        if "fred@example.com" not in data:
            raise ValidationError("You have forgotten about Fred!")

        # Always return a value to use as the new cleaned data, even if
        # this method didn't change it.
        return data

Это позволит проверить, есть ли в поле 'recipients' определенный email. Если нет, то возникает ошибка ValidationError с отображением объявленного текста под соответствующим полем в форме.

Вернуться на верх