验证表单两个表单中的多个RecaptchaV2,并在php中提交

问题描述

我现在在同一页面上有两个表单,我是验证表单,当时Google验证码响应是在那时出现的,一个是在验证另一个不是验证响应,显示为空白 下面的脚本呈现验证码

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
            async defer>
        </script>
    <script type="text/javascript">
          var verifyCallback1 = function(response) {
              if(response.length == 0) {
                 document.getElementById('g-recaptcha-error1').innerHTML = '<span 
               style="color:red;">Captcha field is required.</span>';
                return false;   
            }else{
              return true;  
            }
                
          }
          var verifyCallback2 = function(data) {
              if(data) {
                return true;      
            }else{
                 return false; 
                $('#g-recaptcha-error2').html('<span style="color:red;">Captcha field is required.</span>');
               
             
            }
                
          }
          var widgetId1;
          var widgetId2;
          var onloadCallback = function() {
            widgetId1 = grecaptcha.render('example1',{
              'sitekey' : '6LdVdc8ZAAAAAFEsEAkoiwB984HVGRlpNOGdwU8C','callback' : verifyCallback1,'theme' : 'light'
            });
            widgetId2 = grecaptcha.render(document.getElementById('example2'),'callback' : verifyCallback2,});
            
          };
        </script>

## form1 对于这种形式,谷歌recaptcha在onsubmit功能上也可以正常工作 但是对于第二个功能,onsubmit验证没有发生,这意味着响应显示为空白

    <form action="" method="post" id="contact-form" onsubmit="return submitUserForm1();">
    
    
    <div id="example1"></div>
 <div id="g-recaptcha-error1"></div>
    <button type="submit" class="button1 btn-sm" name="Submit" >Submit</button>
    <script src='https://www.google.com/recaptcha/api.js'></script>
    </form>

## form2

在我提交第二份表单答复时,这里为空白

    <form class="contact_form1" id="contact_form2" action="" method="post" onsubmit="return submitUserForm2();">
                 
                        <div class="FormBgColor">
                  <div align="center"><span style="color:#F00; font-size:14px;"> <?PHP echo $flag; ?><?PHP echo $errors; ?></span></div>
                          
                    <div class="FormGroup">                 
                   <div id="example2"></div>
 <div id="g-recaptcha-error2"></div>
           
                    </div>
                          <div class="button">
                            <input type="submit" class="SubmitBtn" value="Register" name="Submit" />
                    
                          </div>
                        </div>
                      </form>

##formValidation on submit

<script>
function submitUserForm1() {
    var response = grecaptcha.getResponse();
    alert(response)
    if(response.length == 0) {
        document.getElementById('g-recaptcha-error1').innerHTML = '<span style="color:red;">Captcha field is required.</span>';
        return false;
    }
}

function submitUserFor2() {
    var response = grecaptcha.getResponse();
    alert(response)
    if(response.length == 0) {
        document.getElementById('g-recaptcha-error2').innerHTML = '<span style="color:red;">Captcha field is required.</span>';
        return false;
    }
}
</script>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)