semantic-ui form validation with google recaptcha (captcha)

Question

semantic-ui form validation with google recaptcha (captcha)

1k Views Asked by user6067699 At 19 October 2024 at 19:27

Any simple way to implement semantic-ui form validation with google recaptcha if the recaptcha field is checked or empty?

Original Q&A

There are 2 best solutions below

**Taylor Sturtz** · Answer 1

To expand on Arpit's answer:

Here's a non-Angular solution that worked for me

Custom validation rule above your fields validation:

$.fn.form.settings.rules.recaptchaValidate = function() {
  return (recaptchaVerified);
};

Add this to your validation:

recaptcha: {
  identifier: 'recaptcha',
  rules: [
    {
      type: 'recaptchaValidate',
      prompt: 'Please complete reCaptcha validation.'
    }
  ]
}

and your HTML:

<div class="required field">
  <div class="g-recaptcha" data-sitekey="{your key here}" data-callback="correctCaptcha"></div>
  <input type="hidden" name="recaptcha" id="recaptch-validation">
</div>

[ ... then this just before closing body tag ... ]

<script type="text/javascript">
  var recaptchaVerified = false;
  var correctCaptcha = function(response) {
    recaptchaVerified = true;
  };
  var expiredCaptcha = function() {
    recaptchaVerified = false;
  };
</script>

**Arpit Sharma** · Answer 2

use below validation for Google reCaptcha validation.

Script:

$(document).ready(function () {
    $('.ui.form').form({
        recaptcha: {
            identifier: 'g-recaptcha-response',
            rules: [
                {
                    type: 'empty',
                    prompt: 'Please complete reCaptcha validation.'
                }
            ]
        }
    },
    {
        onSuccess: function (event, fields) {
            console.log('Success:', fields);
            return false;
            //event.preventDefault();
        },
        onFailure: function (error) {
            console.log('Failure',error);
            return false;
        }
    });
});

HTML:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Self Registration Module</title>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <script src="../../Content/Scripts/jquery.min.js"></script> <!-- version 3.0.0 ->
        <script src="../../Content/semantic/semantic.min.js"></script>
        <link href="../../Content/semantic/semantic.min.css" type="text/css" rel="stylesheet" class="ui" />
        <script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer></script>
    </head>
    <body ng-app="registrationApp">
        <div class="ui container" lang="en"
            <div class="ui attached message">
                <div class="header">
                Registation Form
                </div>
                <p>Fill out the form below to register user in rev</p>
            </div>
            <form class="ui form attached segment">
                <div class="field">
                    <div vc-recaptcha
                        key="'6Lf4ax0UAAAAADWkffMAXBsFzx2dgkMMnqvw4tIE'"
                        ng-model="RecaptchaResponse">
                    </div>
                </div>
                </div>
            </form>
        </div>
    </body>
</html>

semantic-ui form validation with google recaptcha (captcha)

There are 2 best solutions below

Related Questions in VALIDATION

Related Questions in CAPTCHA

Related Questions in RECAPTCHA

Related Questions in SEMANTIC-UI

Trending Questions

Popular # Hahtags

Popular Questions