Recaptcha 3 – chyba pri odeslani formulare

Napsal musilondrej;1661820

Ahoj, tento typ chyby se obvykle vyskytuje, když se snažíš nastavit atribut elementu, který ještě nebyl vytvořen nebo načten do DOMu. Můžeš zkusit tuhle situaci vyřešit tak, že načítání reCaptchy přesuneš až na konec stránky k tagu .

...            <script src="https://www.google.com/recaptcha/api.js?render=xxxxxxxxxxxxx"></script>    <script>        grecaptcha.ready(function () {            grecaptcha.execute('xxxxxxxxxxxxx', { action: 'pageFormularIndex' }).then(function (token) {                const recaptchaResponse = document.getElementById('recaptchaResponse2');                recaptchaResponse.value = token;            });        });    </script></body>

Měl by si ale volat grecaptcha.execute až po kliknutí odeslat formulář, aby se předešlo tomu, že vyprší expirace tokenu (je platný 2 minuty), to můžeš udělat následovně: 

1. Přiřadit ID k formuláři

<form action="#contact-us" class="clearfix" method="post" id="contactForm">

2. Odstranit atribut name z tlačítka

<button type="submit" class="btn btn-primary btn-lg btn-ico btn-ico-plus-dark text-lowercase">Odeslat poptávku</button>

2. Upravit JS kód následovně: 

document.addEventListener('DOMContentLoaded', function () {    const contactForm = document.getElementById('contactForm');    contactForm.addEventListener('submit', onSubmit);    function onSubmit(e) {        e.preventDefault();        const recaptchaResponse = document.getElementById('recaptchaResponse2');        grecaptcha.ready(function () {            grecaptcha.execute('xxxxxxxxxxxxx', { action: 'pageFormularIndex' }).then(function (token) {                recaptchaResponse.value = token;            })                .then(function (response) {                    contactForm.submit();                })                .catch(function (error) {                    console.log(error);                });        });    }});