Can't use Recaptcha v3 in form with AJAX

Sogl commented 4 years ago

Hello!

I used previously Captcha v2 with "I'm not a robot" check, worked fine. Some time ago I saw more spam in my inbox and decided to change Captcha to v3.

I have form in different non-modular page in contacts.ru.md and contacts.en.md:

My form definition (Captcha field based on learn):

cache_enable: false
title: Contacts

form:
    name: contact-form
    classes: send-form
    template: form-messages
    #refresh disable
    refresh_prevention: true

    fields:

        name:
            label: Name
            placeholder:  Your name
            outerclasses: 'col-md-6'
            type: text
            validate:
                required: true

        mail:
            label: Email
            type: email
            placeholder: Your e-mail
            outerclasses: 'col-md-6'
            validate:
                required: true

        message:
            label: Message
            placeholder: Your message
            outerclasses: 'col-md-12'
            type: textarea
            validate:
                required: true

        g-recaptcha-response:
            display_label: false
            outerclasses: 'col-md-12'
            type: captcha
            recaptcha_not_validated: 'Captcha not valid!'
            validate:
                required: true

        honeypot:
            type: honeypot

    buttons:
        submit:
            type: submit
            value: Send

    process:
        captcha: true
        email:
            from: "{{ config.plugins.email.from }}"
            to:
                - "{{ config.plugins.email.to }}"
            subject: "Message from [mysite.ru/ru]"
            body: "{% include 'forms/data.html.twig' %}"
        message: 'Thank you!'

js AJAX part based on learn example:

    var form = $('form.send-form');
    form.submit(function(e) {
        // prevent form submission
        e.preventDefault();

        // submit the form via Ajax
        $.ajax({
            url: form.attr('action'),
            type: form.attr('method'),
            dataType: 'html',
            data: form.serialize(),
            success: function(result, status, jqXHR) {

                 console.log(result);
                 console.log(status);
                 console.log(jqXHR);

                 new Noty({
                    theme: 'metroui',
                    layout: 'topCenter',
                    text: result,
                    timeout: 5000
                }).show();

            }
        });
    });

I develop on localhost and generated new v3 keys. Here my list of domains:

Form options with v3 keys:

Finally my form with Captcha badge:

Steps:

With refresh_prevention: true I see Captcha fail: After a second my page refreshed with white screen and "This form has already been submitted." message. No mail in inbox.
Without refresh_prevention: true I see the same Captcha fail, but success message "Thank you!" on white screen. Mail sended.
Without refresh_prevention: true and without captcha: true (process section) I see success message: after that page refresh again with white screen and message "Thank you!". Mail sended.