Invisible Recaptcha Validation

[ScherlOMatic]

Hello! I'm trying to implement the invisible option, but I wasn't able to keep my client and server side validation. Somehow the bind attr and the javascript behind kills everything else.

 {{ form_start(form, {'attr': {'class': 'recaptcha-form'}}) }}
....

->add('captcha', EWZRecaptchaType::class, [
                    'mapped' => false,
                    'constraints' => [
                        new RecaptchaTrue()
                    ],
                    'attr' => [
                        'options' => [
                            'theme' => 'light',
                            'type' => 'image',
                            'size' => 'invisible',
                            'defer' => true,
                            'async' => true,
                            'callback' => 'onReCaptchaSuccess',
                            'bind' => 'contact_submit',
                        ]
                    ]
                ])

Am I missing something, or do I need to tweak the javascript behind the bind function?

thx

[OneWeb]

I'd also be interested to know how to achieve both client and server-side validation with the invisible implementation.

Thanks.

[sylbal]

Hi,

It seems that I was able to make this work by commenting the callback option

                   'attr' => array(
                       'options' => array(
                           'theme' => 'light',
                           'type'  => 'image',
                           'size' => 'invisible',              // set size to invisible
                           'defer' => true,
                           'async' => true,
                           //'callback' => 'onReCaptchaSuccess', // callback will be set by default if not defined (along with JS function that validate the form on success)
                           'bind' => 'gstlc_company_submit', // this is the id of the form submit button
                       )
                   ),

This seems linked to a small issue in the widget view test

            {% if attr.options.size == 'invisible' and attr.options.callback is not defined %}
                {% set options = attr.options|merge({'callback': 'onReCaptchaSuccess'}) %}
                {% set attr = attr|merge({'options': options}) %}

                <script type="text/javascript">
                    var onReCaptchaSuccess = function() {
...

Off-topic : The captcha is not really invisible but somehow more discret at the bottom right of the browser:

[zatorck]

I was success with invisble rcaptcha only with vihuvac/recaptcha-bundle

you need override callback by "callback" => "onCustomReCaptchaSuccess" and creating your own JS function

<script type="text/javascript">
    function onCustomReCaptchaSuccess() {
        let errorDivs = document.getElementsByClassName("recaptcha-error");
        if (errorDivs.length) {
            errorDivs[0].className = "";
        }

        let errorMsgs = document.getElementsByClassName("recaptcha-error-message");
        if (errorMsgs.length) {
            errorMsgs[0].parentNode.removeChild(errorMsgs[0]);
        }

        let forms = document.getElementsByClassName("recaptcha-form");
        if (forms.length) {
            let recaptchaSubmitEvent = document.createEvent("Event");
            recaptchaSubmitEvent.initEvent("submit", true, true);
            forms[0].addEventListener("submit", event => {
                event.target.submit();
        }, false);
            forms[0].dispatchEvent(recaptchaSubmitEvent);
        }
    }; 
</script>

[AdamReece-WebBox]

If it's of any use, I found the issue was that I had AJAX enabled in the configuration. This must be off for invisible mode.