将 css 应用于 google recaptcha 元素

Question

I use Google reCAPTCHA in my forms with some validation hack, which allows stop submitting the form if reCAPTCHA is not checked.

The problem is, I want to apply some css rules (ie border-color) on a captcha element in iframe if user forgot to check it. I tried to remove all of the unnecessary parts of the code from my examples

html form

<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>

In my js code I tried to find necessary element with .contents() function

$('.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(); } });

So I got the error

The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "https". Protocols must match.

I guess if I could send a request from https I'll get the same error or similar (because there are no ways to apply js code to cross-domain iframe elements, right?)

So, any ideas how to display a red border around reCAPTCHA block if user don't check it before submission?

Answer 1

The simplest way I can think of would be to put a border on the div that contains the iframe. But, this might not necessarily be the same size as the iframe. However, there is a nested div inside of this that is the correct size. So, the following code should do the trick:

$('.form-box').submit(function(e){
if (grecaptcha.getResponse() == ""){
    e.preventDefault();
    $('.g-recaptcha div div').css('border', '1px solid red');
}
else { $('.form-box').submit(); } });