I have a form structured as so.
<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>
I also have a script at the bottom of the file. The point of the script will be to verify a recaptcha before submitting the form. Here is my script.
<script>
document.getElementById('email_subscription_form').addEventListener('submit', verifyRecaptcha);
function verifyRecaptcha(e) {
e.preventDefault()
return false
}
</script>
I was thinking, based on some research, that the function returning false would stop the form from submitting. However, the form still submits and hits the endpoint.
I have also tried this:
<form id="email_subscription_form" class="form-inline float-right" method="post" action="/my-endpoint/" onsubmit="return verifyRecaptcha()">
and
<form id="email_subscription_form" class="form-inline float-right" method="post" action="/my-endpoint/" onsbubmit="return false">
but the form still submits.
What can I do to stop the form from submitting until verified? This is a Django project, so the template is a Django template.
I'd made some research and in the form theres a parameter onsubmit="" where you can fit a call to a verifing function as you already have with verifyRecaptcha(e). As far i can see, return false part should stop the form, maybe it's because you are not using the onsubmit="verifyRecaptcha(e)" in the form opening tag. So direct onload script does not work. Your code should look like this:
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>
I highly recommend that you look into how django can help you with forms: working with forms.
django's built-in form management has all the good stuff, such as validation, already handled and allows you to focus on other things. Also, you can still add your JS as usual.
See the above link to the docs and this following example to get some quick insight:
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
This would check if the field 'recipients' has the specific email in it. If not, it would raise a ValidationError with the declared text being displayed below the respective field in the form.