Question

我正在向表单添加recapcha v2。我已经搜索过如何通过Javascript客户端验证验证码，以了解提交提交表单之前验证码是否已完成。不论验证码是否已完成，该表单都会验证false。

我尝试过的事情：

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

当我尝试提醒响应时，它为空白。我如何获得代码以了解重新验证已完成？ Javascript可以很好地测试表单上的其他字段。

我在网站上发现了另一种使用以下表格：

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

此表单可以正常工作。我尝试将此验证添加到不包含的表单中，即使我有，它也会一直告诉我要完成验证。

Answer 1

在模态窗口中创建的页面上有3种形式。它们全部隐藏，直到有人单击链接以显示覆盖窗口，从而显示表单。结果，同一reCAPCHA在页面代码中存在3次。当我打电话时：

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

检查reCAPCHA是否已完成，代码如何知道要获取响应的reCAPCHA？它是否只是从页面上的最高位获取它？它没有表单参考。我检查了一下，并且代码中的表单功能达到了预期的最高水平，其他2个则没有。即使reCAPCHA已完成，下面的两个也会返回空白响应。经过一番研究，我发现以下问题：How do I show multiple recaptchas on a single page?指出：一个页面上的多个表单必须共享reCAPCHA。

这是我的解决方案：我创建了一个包含4个DIV的模态窗口。每个DIV都有标题和表单字段。 DIV获得ID的形式为form1到form3和reCAPCHA。然后，我使用javascript：displayForm（1或2或3）链接到表单。函数DisplayForm（id）接受传递的id并显示隐藏其他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"
            }
    }

这使我能够用一个reCapcha显示三种形式中的任何一种。然后，我不得不在reCAPCHA DIV中添加一个隐藏的表单字段，以指示显示的表单。这将允许表单验证Javascript验证正确的表单。

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

然后，我必须将3个表单处理页面合并为一个页面，并将表单ID传递给处理页面，以便它知道要处理的表单。所有这一切的唯一好处是表单已经构建。这是将它们全部拼接到一个模式弹出窗口中，然后消除3个单独的弹出窗口的问题。一个小小的毛病是3个表单的字段名称相同，必须更改。这包括验证和处理页面。

验证Google recapcha客户端javascript

1 个答案: