Otávio C A Serra
Otávio C A Serra

Reputation: 157

Semantic UI / Fomantic UI form validation with Google reCAPTCHA v3

I'm trying to find a way to validate Semantic UI / Fomantic UI forms using Google reCAPTCHA v3. I found an option for validation using Google reCAPTCHA v2 here on Stack. But, the new form of V3 validation is different and uses another form of user interface.

Upvotes: 0

Views: 246

Answers (1)

Otávio C A Serra
Otávio C A Serra

Reputation: 157

UPDATE: I found a way. I used this source as an initial reference: https://code.tutsplus.com/tutorials/example-of-how-to-add-google-recaptcha-v3-to-a-php-form--cms-33752. Follow the form of validation using Semantic UI / Fomantic UI. On the other hand, to validate the data on the server, follow the previous reference for more information.

Validation of the form:

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;
        }
    });

Upvotes: 1

Related Questions