为什么我的带有 recaptcha 的 django 表单发送数据甚至清空 recaptcha？

Question

我将 google recaptcha V2 放入我的 django 项目表单中。它看起来像工作，但如果我将 recaptcha 复选框留空，我的表单仍会发送。

forms.py

from django import forms
from captcha.fields import ReCaptchaField
from django.forms import Textarea
from .models import *


class CustomerForm(forms.ModelForm):
    captcha = ReCaptchaField(
    public_key='key',
    private_key='key',
)
    class Meta:
        model = Customer
        fields = '__all__'
    def __init__(self, *args, **kwargs):
        # get 'user' param from kwargs
        user = kwargs.pop('user', None)
        super().__init__(*args, **kwargs)
        self.fields['i_have_read_rules'].widget.attrs['required'] = 'True'
        self.fields['i_agree'].widget.attrs['required'] = 'True'
        self.fields['captcha'].widget.attrs['required'] = 'True'
        for field in self.fields:
            self.fields[field].widget.attrs['class'] = 'form-control'
        self.fields['i_have_read_rules'].widget.attrs['class'] = 'form-check'
        self.fields['i_agree'].widget.attrs['class'] = 'form-check'

html

        <form id="add_form_order" method="post">
            {% csrf_token %}
            <div class="form-group">{{form.choice_services}}</div>
            <div class="form-group">{{form.name}}</div>
            <div class="form-group">{{form.telephone_number}}</div>
            <div class="form-group">{{form.email}}</div>
            <div class="form-group">{{form.message}}</div>
            <div class="form-group">{{form.contact_text}}</div>
                                    {{ form.captcha }}

        </form>

Answer 1

html

    <form id="add_form_order" method="post">
        {% csrf_token %}
        <div class="form-group">{{form.choice_services}}</div>
        <div class="form-group">{{form.name}}</div>
        <div class="form-group">{{form.telephone_number}}</div>
        <div class="form-group">{{form.email}}</div>
        <div class="form-group">{{form.message}}</div>
        <div class="form-group">{{form.contact_text}}</div>
                                {{ form.captcha }}

    </form>


<!--recaptcha-->
<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
<script>
window.onload = function() {
    var $recaptcha = document.querySelector('#g-recaptcha-response');

    if($recaptcha) {
        $recaptcha.setAttribute("required", "required");
    }
  const $form = document.querySelector('form');
  $form.addEventListener('submit', (event) => {
    event.preventDefault();
    console.log('prevented submit by code for demo');
  });
};
</script>

css

#g-recaptcha-response {
    display: block !important;
    position: absolute;
    margin: -78px 0 0 0 !important;
    width: 302px !important;
    height: 76px !important;
    z-index: -999999;
    opacity: 0;
}