validate google recapcha client side javascript

Question

I'm adding a recapcha v2 to a form. I've searched for how to validate the recapcha via Javascript client side to know if the recapcha has been completed before submitting the form. The form validates false regardless of whether or not the recapcha has been completed.

what I have tried:

      var response = grecaptcha.getResponse();
      if(response.length == 0) 
      { 
        //reCaptcha not verified
        alert("please complete the reCAPCHA. Try Again!"); 
        
        return false;
      }

When I try to alert response, it's blank. how do I get the code to know that the recapcha has been completed? The Javascript tests the other fields on the form fine.

I found another form on the site that uses:

if (grecaptcha.getResponse() == ""){
    alert("You must complete the recapcha in order to submit the form. Try again.");
    return false;
}

This form works as one would expect. I tried adding this validation to the form that does not and it keeps telling me to complete the recapcha even if I have.

Answer 1

There are 3 forms on the page that have been created in modal windows. They are all hidden until someone clicks the link to display the overlay window and thus the form. As a result, the same reCAPCHA is exists 3 times in the page code. When I call:

if (grecaptcha.getResponse() == ""){
    alert("You must complete the reCAPCHA in order to submit the form. Try again.");
    return false;
}

to check if the reCAPCHA has been completed, how does the code know which reCAPCHA to get the response of? Does it simply grab it from the one highest on the page? It’s not like it has a form reference. I checked and the form highest in the code functions as expected, the other 2 do not. The lower two return blank responses even if the reCAPCHA has been completed. After a bit of research, I found the following question: How do I show multiple recaptchas on a single page? which states that: multiple forms on a single page must share the reCAPCHA.

Here is my solution: I created a single modal window with 4 DIVs in it. Each DIV has the title and form fields in it. The DIVs get IDs form1 to form3 and reCAPCHA. I then link to the form using javascript:displayForm(1 or 2 or 3). The function DisplayForm(id) takes the passed id and shows the corresponding form hiding the other 2.

function displayForm(id){
                if(id == 1){
                    document.getElementById('form1').style.display = "block";
                    document.getElementById('form2').style.display = "none";
                    document.getElementById('form3').style.display = "none";    
                    document.getElementById('which').value = 1;
                    document.location = "#popup3"
            }
            
            if(id == 2){
                document.getElementById('form1').style.display = "none";
                document.getElementById('form2').style.display = "block";
                document.getElementById('form3').style.display = "none";    
                document.getElementById('which').value = 2;
                document.location = "#popup3"                   
            }
            
            if(id == 3){
                document.getElementById('form1').style.display = "none";
                document.getElementById('form2').style.display = "none";
                document.getElementById('form3').style.display = "block";   
                document.getElementById('which').value = 3;
                document.location = "#popup3"
            }
    }
    
    

This gives me the ability to show any of the 3 forms with one reCapcha. I then had to add a hidden form field in the reCAPCHA DIV to indicate which form was displayed. This will allow the form validation Javascript to validate the correct form.

Function checkForms(id){
    If (id == 1){
        Check form 1
    } 
    If (id == 2){
        Check form 2
    }
    If (id == 3){
        Check form 3
    }
    Check reCAPCHA{
    }
}

I then have to combine the 3 form processing pages into one and pass the form id to the processing page so it knows which form to process. The only good thing about all of this was that the forms are already built. It’s was a matter of stitching them all together in one modal popup and then eliminating the 3 separate ones. The small hiccup is that the 3 forms have fields with the same names which will have to be changed. This included the validation and on processing page.