how to show google recaptcha error message with javascript

Question

After validation, if captcha is not selected, a response is returned with g-recaptcha-response.

Because there is a dash in g-recaptcha-response, I can not display it

if (response.data.msg.g-recaptcha-response) {
document.getElementById('captcha').innerText = response.data.msg.g-recaptcha-response
}

Answer 1

Create a span or div tag where you want to display the message. Here I have just put it under the captcha box.

<div class="g-recaptcha">
</div>
<span id="error-captcha"></span>

Then validate with the script below and append the validation message to it:

if(grecaptcha.getResponse().length == 0){
     $('#error-captcha').empty()
     $('#error-captcha').append("Please tick the recaptcha.");
    }