Семантический пользовательский интерфейс / Проверка формы пользовательского интерфейса Fomantic с помощью Google reCAPTCHA v3

#forms #validation #recaptcha #semantic-ui #fomantic-ui

Вопрос:

Я пытаюсь найти способ проверки семантических форм пользовательского интерфейса / Fomantic UI с помощью Google reCAPTCHA v3. Я нашел возможность проверки с помощью Google reCAPTCHA v2 здесь, в стеке. Но новая форма проверки V3 отличается и использует другую форму пользовательского интерфейса.

Ответ №1:

ОБНОВЛЕНИЕ: Я нашел способ. Я использовал этот источник в качестве начальной ссылки: https://code.tutsplus.com/tutorials/example-of-how-to-add-google-recaptcha-v3-to-a-php-form—cms-33752. Следуйте форме проверки с использованием семантического пользовательского интерфейса / пользовательского интерфейса Fomantic. С другой стороны, чтобы проверить данные на сервере, следуйте предыдущей ссылке для получения дополнительной информации.

Проверка формы:

 var formSelector = 'formSelector'; // Form selector

$('.ui.form')
    .form({
        onSuccess(event, fields){
            var action = 'action'; // Action 
            var googleSiteKey = 'googleSiteKey'; // Google Site Key 
            
            grecaptcha.ready(function() {
                grecaptcha.execute(googleSiteKey, {action: action}).then(function(token) {
                    $(formSelector).append('<input type="hidden" name="token" value="' token '">');
                    $(formSelector).append('<input type="hidden" name="action" value="' action '">');
                    $(formSelector).unbind('submit').submit();
                });
            });
            
            return false;
        }
    });