How to Enable a Submit Button After Turnstile CAPTCHA is Passed (Multiple Forms)

Website, Application, Performance Turnstile
1

What is the name of the domain?

none

What is the error number?

none

What is the error message?

none

What is the issue you’re encountering

how to do it

What are the steps to reproduce the issue?

Hi everyone!

I am working with Cloudflare’s Turnstile CAPTCHA on a page with multiple forms, and I need to disable the submit button until the user successfully completes the CAPTCHA challenge. Once the user solves the CAPTCHA, the button should be enabled. However, I encountered some issues trying to handle multiple forms on the same page.

How can I listen to a passed event ?

My Code so far:

    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=onloadTurnstileCallback" defer></script>

    <script>
        // This function is called when the Turnstile script is loaded and ready to be used.
        // The function name matches the "onload=..." parameter.
        window.onloadTurnstileCallback = () => {

            const formsWithTurnstile = document.querySelectorAll('form:has(.cf-turnstile)');
            console.debug('_turnstileCb called', {formsWithTurnstile});

            // Disable submit buttons for all forms initially
            formsWithTurnstile.forEach(function(form) {
                const submitButton = form.querySelector('button[type="submit"]');
                if (submitButton) {
                    submitButton.disabled = true; // Disable button initially
                }

                // Listen for Turnstile pass event to enable the submit button
                const turnstileElement = form.querySelector('.cf-turnstile');
                if (!turnstileElement) {
                    return;
                }

                turnstile.render('#' + turnstileElement.id, {
                    sitekey: '1x00000000000000000000AA',
                    theme: 'light',
                    dataSize: "flexible"
                });
                
                // Add event listener for the 'turnstile:pass' event
                turnstileElement.addEventListener('turnstile:pass', function() {
                    console.log('Turnstile passed, enabling submit button');
                    if (submitButton) {
                        submitButton.disabled = false; // Enable the submit button when the user passes the CAPTCHA
                    }
                });
            });
        }
    </script>
2

May I ask if you are trying to fetch the state of the Turnstile widget and response and validation done on the server side or a client side? Therefrom once you’ve got it returned, to remove the disabled attribute from the button? :thinking:

3

Hello,

The server side will be done after form submission, this will be handled by the backend,
In the client side, after confirmation that the user is human, the submit button get enabled.

The behavior is the same as the cloudflare login. I do not know which event I have to listen to to reenabled the button: eg → Watch behavior | Streamable
Already read the documentation, did not find anything.

4

Example → Watch behavior | Streamable
The other video expired.

5

The callback you’re looking for is just called ‘callback’

2 Likes
6

Thank you, I need new glasses. :smile:

1 Like
7

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.