Stop Form From Being Submitted Until Verified-CodePudding

I have a form structured as so.

<form id="email_subscription_form"  method="post" action="/my-endpoint/">
   <div >
      <label for="id_email_address" >Email Address</label>
      <input type="email" id="id_email_address"  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"  method="post" action="/my-endpoint/" onsubmit="return verifyRecaptcha()">

and

<form id="email_subscription_form"  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.

CodePudding user response：

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 onl oad script does not work. Your code should look like this:

html:

<form id="email_subscription_form" onsubmit="verifyRecaptcha(e)  method="post" action="/my-endpoint/">
   <div >
      <label for="id_email_address" >Email Address</label>
      <input type="email" id="id_email_address"  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>

CodePudding user response：

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 "[email protected]" 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.