Set reCaptcha field as required

Question

I use the new reCaptcha with the jQuery Validate plugin. The validation plugin works nice with my form but unfortunately it didn't work with reCaptcha. My attempt to make it work below:

HTML:

<div class="g-recaptcha" name="recaptcha" id="recaptcha" data-sitekey="XXXXX"></div> 

Javascript:

 recaptcha: {
    required: true
      }    

but it didn't worked. Does anyone know how to fix this. I simply need the default This field is required error message.

Answer 1

Your code:

<div class="g-recaptcha" name="recaptcha" id="recaptcha" data-sitekey="XXXXX"></div>

with...

recaptcha: {
    required: true
} 

You cannot validate a <div>. Period.

The jQuery Validate plugin can only validate <input>, <textarea> and <select> elements that are also within a <form></form> container.

The only workaround would be to copy your value into a type="hidden" input element and then apply your validation to that.

Answer 2

You should add hidden input for reCaptcha, cause jQuery Validation can only validate input/textarea/select:

<div class="g-recaptcha" data-sitekey="XXXXX"></div>
<input type="hidden" name="recaptcha" data-rule-recaptcha="true">
<!-- 
     We set "data-rule-recaptcha" — this will require jQuery Validate
     to validate this field using method named "recaptcha"
     (which we write below) 
-->

Then rewrite your JS like this:

// By default jQuery Validation ignore hidden inputs, 
// so we change settings to ignore inputs with class "no-validation". 
// Cause our hidden input didn't have this class — it would be validated!
$('form').validate({
  ignore: '.no-validation'
});     

// Add our validation method for reCaptcha: 
$.validator.addMethod("recaptcha", function(value, element) {
  var grecaptcha = window.grecaptcha || null;
  return !grecaptcha || grecaptcha.getResponse();
}, "Please fill reCAPTCHA");

That's all.

Answer 3

hoping that you are using HTML5 form tag.

<form>
<div class="g-recaptcha" name="recaptcha" id="recaptcha" data-sitekey="XXXXX" required></div>
</form>

simply use required in the end

Answer 4

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:

$("#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>');
            }

    });             

});

HTML:

<div class="g-recaptcha" name="recaptcha" id="recaptcha" data-sitekey="XXXXXXXXXXXXXXXXXXXXXXXXX"></div>