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 (i.e. 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?

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 (i.e. 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?

• javascript
• jquery
• html
• css
• iframe

• I would wrap the recaptcha div in another div and just style that. – taki Martillo Commented Jul 30, 2015 at 19:32
• I thought about it, but I just can apply styles to .g-recaptcha div, and there is only one way to do it good - set width and height of that div the same as iframe has – frsv Commented Jul 30, 2015 at 19:39
• Have you looked into theming reCAPTCHA? Looks like custom styling options might be limited. You won't be able to use JS to cross into an iframe (of a different origin) due to XSS protections in the browser. developers.google./recaptcha/old/docs/… – Benjamin Solum Commented Jul 30, 2015 at 19:49

1 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(); } });