Tengo un formulario estructurado como tal.
<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>También tengo un script en la parte inferior del archivo. El objetivo del script será verificar un recaptcha antes de enviar el formulario. Aquí está mi guión.
<script> document.getElementById('email_subscription_form').addEventListener('submit', verifyRecaptcha); function verifyRecaptcha(e) { e.preventDefault() return false } </script>Estaba pensando, según algunas investigaciones, que la función que devolvía false detendría el envío del formulario. Sin embargo, el formulario aún se envía y llega al punto final.
También he probado esto:
<form id="email_subscription_form" class="form-inline float-right" method="post" action="/my-endpoint/" onsubmit="return verifyRecaptcha()">y
<form id="email_subscription_form" class="form-inline float-right" method="post" action="/my-endpoint/" onsbubmit="return false">pero el formulario aún se envía.
¿Qué puedo hacer para detener el envío del formulario hasta que se verifique? Este es un proyecto de Django, por lo que la plantilla es una plantilla de Django.
Investigué un poco y en el formulario hay un parámetro onsubmit="" donde puede ajustar una llamada a una función de verificación como ya lo ha hecho con verifyRecaptcha(e) . Por lo que puedo ver, return false debería detener el formulario, tal vez sea porque no está utilizando onsubmit="verifyRecaptcha(e)" en la etiqueta de apertura del formulario. Entonces, el script de carga directa no funciona. Su código debería verse así:
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>Recomiendo encarecidamente que investigues cómo Django puede ayudarte con los formularios: trabajar con formularios .
La gestión de formularios incorporada de django tiene todas las cosas buenas, como la validación, ya manejadas y le permite concentrarse en otras cosas. Además, aún puede agregar su JS como de costumbre.
Consulte el enlace anterior a los documentos y el siguiente ejemplo para obtener una idea rápida:
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 dataEsto verificaría si el campo 'destinatarios' tiene el correo electrónico específico. De lo contrario, generaría un ValidationError con el texto declarado que se muestra debajo del campo respectivo en el formulario.