How can I make reCAPTCHA a required field?

if you want to use the native html5 popups, than here is the solution

JavaScript:

window.onload = function() {
    var $recaptcha = document.querySelector('#g-recaptcha-response');

    if($recaptcha) {
        $recaptcha.setAttribute("required", "required");
    }
};

CSS:

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

I had the same problem as yours and solved it this way:

First declare a variable that stores 1 or 0 depending or whether the user filled the capcha correctly.

var allowSubmit = false;

Then you need a function which gets executed when the user fills the reCapcha correctly:

function capcha_filled () {
    allowSubmit = true;
}

... and a function that gets executed when the reCapcha session expires:

function capcha_expired () {
    allowSubmit = false;
}

To tell reCapcha about your functions (callbacks), set those data-attributes in your html:

<div class="g-recaptcha"
   data-callback="capcha_filled"
   data-expired-callback="capcha_expired"
   data-sitekey="your site key"></div>

Or if you use explicit load:

  var onloadCallback = function() {
    grecaptcha.render('your_div_id', {
      'sitekey' : 'your_site_key',
      'callback': capcha_filled,
      'expired-callback': capcha_expired,
    });
  };

You need also a callback for the form submission:

function check_if_capcha_is_filled (e) {
    if(allowSubmit) return true;
    e.preventDefault();
    alert('Fill in the capcha!');
}

Finally add in the form the onsubmit attribute:

<form action="..." onsubmit="check_if_capcha_is_filled">

Note: as mentioned in the comments, a server validation is still needed. The code prevents accidentally submitting the form unless the capcha is filled and is only for user's convenience.

I found this to be a quick & easy way to do it. Add this to your headers:

<script>
window.onload = function() {
  var recaptcha = document.forms["myForm"]["g-recaptcha-response"];
  recaptcha.required = true;
  recaptcha.oninvalid = function(e) {
    // do something
    alert("Please complete the captcha");
  }
}
</script>

This only works in HTML5, and is (or should be) supported by these browsers: http://caniuse.com/#feat=form-validation

(The JS console in Chrome shows this error message: "Invalid form control" only in Google Chrome , and I haven't been able to work around this. Hopefully someone else will improve this response.)

I checked for existance of #g-recaptcha-response:

function checkRecaptcha() {
    res = $('#g-recaptcha-response').val();

    if (res == "" || res == undefined || res.length == 0)
        return false;
    else
        return true;
}

//...

$('#frm-signup').submit(function(e) {

    if(!checkRecaptcha()) {
        $( "#frm-result" ).text("Please validate your reCAPTCHA.");
        return false;
    }
    //...
});

This really should be part of the docs...

How can I make reCAPTCHA a required field?

Related

Recent Posts