Почему форма отправляется с пустым чекбоксом recaptcha google? Django

Я установил recaptcha в мой проект Django и добавил поле recaptcha в форму. Но форма отправляется даже с пустым чекбоксом 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>

Ответы (1 шт):

Автор решения: Sergei Sokov

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;
}
→ Ссылка