google recaptcha с рулем js не работает

Question

Я пытаюсь использовать reCaptcha с рулем js, но не работает, ниже мой руль js код

    <div class="slide first-slide visible" id="slideEmail" data-slide-order="1">
    <div class="form-name initial-form-name">Log In</div>
    <form id="emailForm" class="form" novalidate>
        <div class="form-input">
            <label for="email">E-mail</label>
            <input type="email" id="email" autocomplete="off" />
            <div class="validation-message-container"></div>
            {{#message}}
                <div class="cookie-message-container">
                    <div class="cookie-message {{type}}">
                        <p>{{body}}</p>
                    </div>
                </div>
            {{/message}}
        </div>
        <div class="g-recaptcha" data-sitekey="{{recaptcha_site_key}}" ></div>
        <div class="buttons-container clearfix">
            <button class="next float-right">Next</button>
        </div>
    </form>
</div>

<div class="slide hidden" id="slidePassword" data-slide-order="2">
    <div class="back-container">
        <div class="back-button">
            <span role="button" class="ion ion-chevron-left back" data-prev-slide-id="slideEmail"></span>
        </div>
        <div class="account">
            <div class="account-name"></div>
            <div class="account-email"></div>
        </div>
    </div>
    <div class="form-name">Password</div>
    <form id="passwordForm" class="form">
        <div class="form-input">
            <label for="password">Password</label>
            <input type="password" id="password" />
            <div class="validation-message-container"></div>
        </div>
        <div class="buttons-container">
            <a class="link password-recovery" id="forgotYourPassword">Forgot your password?</a>
            <button class="next float-right">Next</button>
        </div>
    </form>
</div>

Итак, в основном это одна форма и логин на основе слайдера. И я хочу сначала проверить электронную почту и reCAPTCHA, а затем перейти ко второму слайдеру.

Ниже мой код JS, где функция написана для обработки logi c

export function handleEmailForm() {
    const email = $('#email');
    const captcha = $('.g-recaptcha-response').val();

    // If email input is empty show validation message
    // and set focus on it
    if (email.val().length >= 0 && captcha) {
        // remove validation messages
        removeValidationMessage(email);
        $.alert(captcha,'<<<<');

        const message = email.val().length <= 0
            ? alert('Enter an email to login') : 'Please confirm you\'re not a robot';
        addValidationMessage(email, message);

        email.focus();
    } else if (!isEmailValid(email.val())) {
        // remove validation messages
        removeValidationMessage(email);

        addValidationMessage(email, 'Invalid email. Email should have an @ symbol and a top-level domain (such as ".com").');
        email.focus();
    }
    // If email input is not empty
    else {
        // remove validation messages
        removeValidationMessage(email);

        // check url params for non-sso url login queryparam: 'sso=false'
        const sso = getUrlParamByName('sso') === 'false' ? 'false' : undefined;

        $.ajax({
            method: "POST",
            url: '/check_the_email',
            data: {
                email: email.val(),
                g_recaptcha_response: captcha,
                sso,
            },
            success: function(data) {

                // remove validation message from email input
                removeValidationMessage($('#email'));

                // remove validation message from password input
                removeValidationMessage($('#password'));

                // clear password input
                $('#password').val('');

                // If email is successfully checked
                // hide loader animation
                hideFormLoader();

                // If user is sso enabled
                // redirect him to his sso provider url
                if (data.sso_url) {

                    window.location.href = data.sso_url;

                } else {

                    // If user is registered
                    // insert his name and email to all connected slides
                    if (data.is_registered) {
                        if (data.username) {
                            $('.account-name').text(data.username);
                        }
                        if (data.email) {
                            $('.account-email').text(data.email);
                        }

                        // Remove validation message
                        removeValidationMessage(email);

                        // Switch to password slide
                        const nextSlideSelector = $('#slidePassword');
                        performNextSlideSwitch(nextSlideSelector);
                    }

                    // If user is not registered
                    // we will show him special alert in login slide
                    if (!data.is_registered) {
                        const message = 'We\'ve found you! Check your email to complete registration and log in.';
                        addValidationMessage($('#email'), message, 'success');
                    }

                }
            },
            error: function(error) {

                // Stop loader animation
                hideFormLoader();

                // Reset Google Recaptcha
                if (grecaptcha) {
                    grecaptcha.reset();
                }

                // If email check is failed
                // handle error
                handleAjaxError(error, $('#email'));
            }
        });
    }
    }

Не уверен, но я не могу сделать это правильно, пробовал много вещей, но не смог заставить это работать. Пожалуйста, помогите мне