问题描述
我在表单中使用 Google reCAPTCHA 并进行了一些验证技巧，如果未检查 reCAPTCHA，则允许停止提交表单。
问题是，如果用户忘记检查它，我想在 iframe 中的验证码元素上应用一些 css 规则（即边框颜色）。 我试图从我的示例中删除所有不必要的代码部分
html表单
<form class="form-box" action="" method="POST">
<label class="col-6" for="user-name">
Name
<input type="text" name="user-name" id="user-name"/>
</label>
<label class="col-6" for="user-phone">
Phone
<input type="text" name="user-phone" id="user-phone"/>
</label>
<div class="g-recaptcha" data-sitekey="[site-key here]"></div>
<div class="col-6 wrap-btn">
<input type="submit" name="submit" value="Step 2" class="btn blue">
</div>
</form>
在我的 js 代码中，我试图用 .contents() 函数找到必要的元素
$('.form-box').submit(function(e){
if (grecaptcha.getResponse() == ""){
e.preventDefault();
$('.g-recaptcha iframe').contents().find('.rc-anchor-light').css('border', '1px solid red');
}
else { $('.form-box').submit(); } });
所以我得到了错误
请求访问的帧具有“http”协议，被访问的帧具有“https”协议。 协议必须匹配。
我想如果我可以从 https 发送请求，我会得到相同或类似的错误（因为没有办法将 js 代码应用于跨域 iframe 元素，对吧？）
那么，如果用户在提交前不检查它，如何在 reCAPTCHA 块周围显示红色边框的任何想法？
1楼
BurningLights
7
已采纳
2015-07-30 19:45:34
我能想到的最简单的方法是在包含 iframe 的 div 上放置一个边框。 但是，这可能不一定与 iframe 的大小相同。 但是，其中有一个大小正确的嵌套 div。 因此，以下代码应该可以解决问题：
$('.form-box').submit(function(e){
if (grecaptcha.getResponse() == ""){
e.preventDefault();
$('.g-recaptcha div div').css('border', '1px solid red');
}
else { $('.form-box').submit(); } });