logo
down
shadow

How can I make reCAPTCHA a required field?


How can I make reCAPTCHA a required field?

By : kekalen
Date : November 20 2020, 01:01 AM
I wish this help you if you want to use the native html5 popups, than here is the solution
JavaScript:
code :
window.onload = function() {
    var $recaptcha = document.querySelector('#g-recaptcha-response');

    if($recaptcha) {
        $recaptcha.setAttribute("required", "required");
    }
};
#g-recaptcha-response {
    display: block !important;
    position: absolute;
    margin: -78px 0 0 0 !important;
    width: 302px !important;
    height: 76px !important;
    z-index: -999999;
    opacity: 0;
}


Share : facebook icon twitter icon
How to make Recaptcha a required field in MVC 3?

How to make Recaptcha a required field in MVC 3?


By : user3213051
Date : March 29 2020, 07:55 AM
seems to work fine to make it work as you type it, return the value, not just call it. Type
code :
onsubmit="return ValidateAndSubmit();"
onclick="return ValidateAndSubmit();"
Set reCaptcha field as required

Set reCaptcha field as required


By : user3106140
Date : March 29 2020, 07:55 AM
I wish this helpful for you So I managed to make it worked. The only problem is after user completing reCaptcha, the message This field is required does not quickly dissapear. I'm using blur, keydown and focusout to detect user input and remove the error message.
JS:
code :
$("#myForm").bind('blur keydown focusout', function(){ 

        var dataArray = $("#myForm").serializeArray(),
        dataObj = {};
        console.dir(dataArray); //require firebug
        //console.log(dataArray);

        $(dataArray).each(function(i, field){
          dataObj[field.name] = field.value;
        });

        var recaptcha = (dataObj['g-recaptcha-response']);

        if(recaptcha != "") {
                $( "#temp" ).remove();
        }       
    });

    $( ".register" ).click(function() {

        var dataArray = $("#myForm").serializeArray(),
            dataObj = {};
            console.dir(dataArray); //require firebug
            //console.log(dataArray);

        $(dataArray).each(function(i, field){
          dataObj[field.name] = field.value;
        });

        var recaptcha = (dataObj['g-recaptcha-response']);

        $( "#temp" ).remove();

            if(recaptcha == "") {
                $("#recaptcha").append('<label id="temp" style="color:red;line-height:normal;font-size: small;">This field is required.</label>');
            }

    });             

});
<div class="g-recaptcha" name="recaptcha" id="recaptcha" data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXX"></div>   
How to make Google reCAPTCHA a required field?

How to make Google reCAPTCHA a required field?


By : user3511236
Date : March 29 2020, 07:55 AM
This might help you What you have to do is prevent the form submission until you can validate the user response by using the Google reCaptcha verify callback, then, if it passes, allow the form to submit. See this answer: Google ReCAPTCHA how to make required? and also check the documentation: https://developers.google.com/recaptcha/docs/display#example
React-Redux : how to make ReCaptcha a required field

React-Redux : how to make ReCaptcha a required field


By : Ridwan Maulana
Date : March 29 2020, 07:55 AM
I think the issue was by ths following , in my react-redux form, i want to make recaptcha a required field, and disable my navigation bar component until recaptcha response is verified, i found some similar questions with javaScript but i wasn't able to apply them with React, because i am using react-recaptcha plugin :
code :
var Recaptcha = require('react-recaptcha');

// specifying verify callback function
var verifyCallback = function (response) {
   this.setState({
        reCaptchaResponse: response
    });
};

ReactDOM.render(
  <Recaptcha
    sitekey="xxxxxxxxxxxxxxxxxxxx"
    render="explicit"
    verifyCallback={verifyCallback}
    onloadCallback={callback}
  />,
  document.getElementById('example')
);
validateForm() {

    // other field validations....

    if (!this.state.reCaptchaResponse || this.state.reCaptchaResponse.trim().length === 0) {
        return {success: false, message: 'Captcha is required.'};
    }
}
constructor() {
     super();
     this.state = {btnDisabled: true};
}
<button disabled={this.state.btnDisabled}>Next</button>
validateForm() {

    // other field validations....

    if (!this.state.reCaptchaResponse || this.state.reCaptchaResponse.trim().length === 0) {
        return {success: false, message: 'Captcha is required.'};
    } else {
        this.setState({
            btnDisabled: false
        });
    }
}
reCaptcha field as required

reCaptcha field as required


By : Arun Ramanujapuram
Date : March 29 2020, 07:55 AM
will help you I am trying to use recaptcha in a form, however, I am having trouble to set it as required. I tried to use the code of the first two answers of this question, however, none of them worked.
code :
function validateForm() {	
    var recaptcha = document.forms["myForm"]["g-recaptcha-response"].value;
    if (recaptcha == "") {
        alert("Please fill reCAPTCHA");
        return false;
    }
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.15.0/jquery.validate.min.js"></script>
<script src="https://www.google.com/recaptcha/api.js"></script>



<form name="myForm" action="login.php"  onsubmit="return validateForm()" method="post">
    <fieldset>
        <legend>Personal information:</legend>
        First name:<br>
        <input type="text" name="firstname" value="Name" required><br> Last name:<br>
        <input type="text" name="lastname" value="Last Name" required><br><br>
    <div class="g-recaptcha" data-sitekey="6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI"></div>
        <input type="hidden" name="recaptcha" data-rule-recaptcha="true">
        <input type="submit" value="Submit">
    </fieldset>
</form>
Related Posts Related Posts :
  • What could be causing my WhatsApp Stickers Pack not to work?
  • How Can I Reorder/Sort The Collections List in Directus?
  • Is this language generic/mighty enough to be used for a generic game AI?
  • graphite, use regular expressions to select the target, or an alternative
  • subtract functions with type real in ml
  • how to filter '(' in navision 2013
  • sending sms from a mobile browser
  • NuGet behind firewall
  • Gstreamer hangs while generating timelapse from JPEGs on Raspberry pi
  • How to retrieve total view count of large number of pages combined from the GA API
  • Websites rich with exercices or explanation for SML?
  • Is there a TempData equivalent in ServiceStack?
  • scipy-0.12.0 failing to install on mountain lion using python setup.py install
  • Looking for simplest option to render Razor cshtml pages in a console application without any web server
  • Evaluating variables at a specific time in Modelica
  • When I run the Application, only "web" engine is running in GlassFish. "webservices" is not started
  • How To Set MIME Type Of Google Drive File
  • Remove Missing Values in Weka
  • Reloading a UICollectionView using reloadData method returns immediately before reloading data
  • carrot2 - can I cluster documents from a folder?
  • StreamSocket has no Close Implementation in C#
  • Rails, Foundation 4, Respond.js not working properly in IE8
  • How can i create imagesurface from cairo xlib's Graphics Context using cairo and x11 Api's?
  • CKEditor "overflow: scroll" on parent causes toolbar to freeze at initial position
  • Differences between components and controls in ENYO
  • Photoshop making isometric?
  • Does Intel IPP 8.0 support in-place operations?
  • What is Object dictionary in CANOpen?
  • Example of orbBasic Indexed User Variables
  • convert to ABSOLUTE in logback
  • How to conditionally download file using p:fileDownload
  • Error on pod install
  • Set HTTP GET Parameters in Finagle
  • different attack that uses sql injection
  • How can I change my xampp username not as 'root'
  • AMQP Content header payload structure
  • Apache POI formula evaluation not working for Excel IF
  • How can I trace RESTEasy's dispatch?
  • Map Freezes on iOS 7 with Google Maps SDK 1.4
  • Comparing lists, is the subset list within the first list
  • Non-ascii character highlight in Sublime Text 2
  • Installing Magit in Aquamacs
  • Receiving error - System.Net.Mail.SmtpException: 4.3.2 try again later
  • Coreaudio render callback in monotouch
  • The command 'yarn --v' also initiates 'yarn install' and installs packages automatically. Why is this happening?
  • save multiple matches in a list (grep or awk)
  • Can a number register be used in a groff request?
  • Mapping FAQ with RASA for large dataset (2000+)
  • Fragment not receiving LiveData updates after remove + add
  • FitText.js makes text bigger rather than smaller
  • ARM - Implementing stack with load/store multiple register values
  • How to check if a ChromeCast Session is already in progress
  • ngForm inside a Carousel Slide in UI Bootstrap not working
  • Clearing attributes in Tritium
  • "vagrant up" failing: Vagrant VM failed to remain in the running state
  • ftsearch returning empty docs
  • What are the advantages of setting "hive.exec.parallel" to false in Hive ?
  • Creating a root certificate in FiddlerCore
  • How to access app.config in a blueprint?
  • DB2 RECORDSET table name converted to uppercase
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org