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.