<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://www.google.com/recaptcha/api.js"></script> <span class="msg-error error"></span> <div id="recaptcha" class="g-recaptcha" data-sitekey="6Ld4Jh8TAAAAAD2tURa21kTFwMkKoyJCqaXb0uoK"></div> <button class="btn btn-primary" id="btn-validate">Validate reCAPTCHA</button>

msg-error {color: #c65848;}.g-recaptcha.error {border: solid 2px #c64848;padding: .2em;width: 19em;}

$( '#btn-validate' ).click(function(){ var $captcha = $( '#recaptcha' ), response = grecaptcha.getResponse(); if (response.length === 0) { $( '.msg-error').text( "reCAPTCHA is mandatory" ); if( !$captcha.hasClass( "error" ) ){ $captcha.addClass( "error" ); } } else { $( '.msg-error' ).text(''); $captcha.removeClass( "error" ); alert( 'reCAPTCHA marked' ); } })