I have integrated Google reCAPTCHA into my forms along with some validation workaround that prevents form submission if the reCAPTCHA is not checked.
However, I am facing an issue where I want to add CSS rules (such as border-color) to the captcha element in an iframe if a user forgets to check it. To simplify my examples, I removed unnecessary parts of the code.
Here is the snippet of 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 JavaScript code, I attempted to target the necessary element using the .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(); } });
Upon execution of the above code, I encountered the following error:
The frame requesting access has a protocol of "http", while the frame being accessed has a protocol of "https". Protocols must match.
This made me realize that attempting to send a request from HTTPS would likely result in a similar error (due to restrictions on applying JS code to cross-domain iframe elements). So, I am seeking any suggestions on how to highlight the reCAPTCHA block with a red border if a user fails to check it before submitting the form.