将css应用于google recaptcha元素

Question

我在我的表单中使用了Google reCAPTCHA和一些验证黑客,如果未检查reCAPTCHA,则允许停止提交表单.

问题是,如果用户忘记检查,我想在iframe的captcha元素上应用一些css规则(即border-color).我试图从我的示例中删除代码中所有不必要的部分

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块周围显示红色边框的任何想法？

Answer 1

我能想到的最简单的方法是在包含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(); } });