javascript - Recaptcha 请求在引导模式弹出窗口中超时

Question

我的站点中有 2 个 recaptcha，但在 2 个不同的页面中。第一个没有问题，第二个位于模式弹出窗口中，单击按钮后显示。

浏览器控制台显示此错误:

验证码以无限循环结束:

显示弹出窗口的按钮:

<div class="col-md-12 col-lg-6" style="text-align:center">
    <button id="showModal" type="button" class="btn btn-block btn-gray show_form" data-periodnumber="$idp"><span class="glyphicon glyphicon-envelope" style="margin-right:10px;"></span>__CONTATTI__</button>
</div>

我的弹出窗口:

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div id="request_titolo" class="modal-header">
				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Chiudi</span></button>
				<h4 class="modal-title" id="request_titolo">__TITOLO_RICHIESTA__</h4>
				<small>__MESSAGGIO_RICHIESTA__</small>
				
			</div>
			<div class="modal-body frontend_request">
				<div class="col-xs-12 col-sm-12 col-md-12 pan-info"></div>
				<div class="row">
					<form id="form_disponibilita" name="myForm" role="form">
						<input type="hidden" id="idp" value="" />
						<input type="hidden" id="langPW" name="lang" value="<?php echo $lang; ?>" />
						<div class="form-group col-md-12">
							<label for="prop_nome">__NOME__</label>
							<div class="input-group">
								<div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>						
								<input type="text" class="form-control" id="prop_nome" placeholder="__NOME__" value="">
							</div>
						</div>
						
						<div class="form-group col-md-12">
							<label for="prop_email">__EMAIL__</label>
							<div class="input-group">
								<div class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></div>						
								<input type="email" class="form-control" id="prop_email" placeholder="__EMAIL__">
							</div>
						</div>
								
						<div class="form-group col-md-12">
							<label for="prop_tel">__TELEFONO__</label>
							<div class="input-group">
								<div class="input-group-addon"><span class="glyphicon glyphicon-phone-alt"></span></div>						
								<input type="text" class="form-control" id="prop_telefono" placeholder="__TELEFONO__">
							</div>
						</div>
	
						<div class="form-group col-md-12">
							<label for="prop_msg_ita">__NOTE__</label>
							<textarea id="prop_note" class="form-control" rows="5"></textarea>
						</div>

						<!-- GOOGLE CAPTCHA -->
						 <div class="form-group col-md-12" style="text-align: center;">
							<p style="color: black;"> Completa la verifica: </p>
							<div style="display: inline-block;" class="g-recaptcha" data-sitekey="6Lf02WwUAAAAAHc2LtidX_HxU1C2iWn_e00-HAML" data-callback="callback"></div>
						</div> 
					
						<!-- END GOOGLE CAPTCHA -->

						<div class="form-group col-md-12">
							<label for="prop_msg_eng">__PRIVACY__</label>
							<input type="checkbox" class="form-control" id="prop_privacy" placeholder="Accetto la privacy" value="yes">
						</div>

						<div class="clear"></div>

						<div class="modal-footer">
							<button type="button" class="btn btn-lg btn-default" data-dismiss="modal">__ANNULLA__</button>
							<button id="btnInvia" type="button" class="btn btn-lg btn-info btn-send" style="background-color: #cccccc !important;" disabled="true">__INVIA__</button>
						</div>
					</form>
				</div>
			</div>

		</div>
	</div>

</div><!-- Fine Modal -->

JS:

function callback(){
    console.log("captcha ok");
	document.getElementById("btnInvia").style.background = '#1bb1d1';
	document.getElementById("btnInvia").disabled = false;
}

window.onload = function() {
    var recaptcha = document.forms["myForm"]["g-recaptcha-response"];
	recaptcha.required = true;
	recaptcha.oninvalid = function(e) {
	    alert("CONVALIDARE IL CAPTCHA!");
	}
}

你能帮帮我吗？

网站:http://www.residencecasacanazei.com/affittasi-vendesi要查看模态，请单击“Contatti”按钮

Answer 1

试试这段代码

window.onload = function() {
    var recaptcha = document.forms["myForm"]["g-recaptcha-response"];
    recaptcha.required = true;
    recaptcha.oninvalid = function(e) {
        alert("CONVALIDARE IL CAPTCHA!");
    }
    recaptcha.reset();
}

一旦您检查了 recaptcah，它会在几分钟后自动显示超时消息。所以我把 recaptcha.reset(); 放在最后，它会在提交后重置它