bootstrap-4-validation-recaptcha-v3-invisible.md

Public Form

Build out all required form fields and add recaptacha <script>, passing "key":

form.html

<script src="https://www.google.com/recaptcha/api.js?render={{ recaptcha_key }}"></script>
<div class="g-recaptcha" id="g-recaptcha"
	data-sitekey="{{ recaptcha_key }}"
	data-size="invisible">
</div>
<form name="register" id="register" action="" method="post" class="needs-validation" novalidate>
		
	<!-- // form inputs here with validation feedback // -->
	
	<input type="text" placeholder="Username" name="user_login" id="user_login" value="" class="form-control" aria-describedby="inputGroupPrepend" required>
	<div class="valid-feedback">
		Username looks good :)
	</div>
	<div class="invalid-feedback">
		Sorry, no anonymity allowed ;)
	</div>

	<input type="hidden" name="q_action" id="q_action" value="register"/>
	<input type="hidden" name="q_registration_nonce" value="{{ q_registration_nonce }}"/>
		
</form>

JS Validation

Include bootstrap validation

bootstrap-validation.js

// BS Form validation
(function() {
	'use strict';
	window.addEventListener('load', function() {
		
		// Fetch all the forms we want to apply custom Bootstrap validation styles to
	  	var forms = document.getElementsByClassName('needs-validation');
		  
		// Loop over them and prevent submission
	  	var validation = Array.prototype.filter.call(forms, function(form) {
		
			form.addEventListener('submit', function(event) {
				
				if (
					form.checkValidity() === false
				) {

					event.preventDefault();
					event.stopPropagation();

					// mark as validated ##
					form.classList.add('was-validated');

					return;

				} 

				// mark as validated ##
				form.classList.add('was-validated');

				// console.dir( validation );

				// declare vars ##
				var sitekey;
				var q_action;

				// check if recaptcha is enabled, if so, fire off ##
				if ( 
					null !== document.getElementById( 'g-recaptcha' ) 
					&& null !== document.getElementById( 'g-recaptcha' ).getAttribute("data-sitekey")
					&& null !== document.getElementById( 'q_action' ) 
				) {

					// get action ##
					q_action = document.getElementById( 'q_action' ).value;
					// console.log( 'recaptcha action: '+q_action );

					// get sitekey ##
					sitekey = document.getElementById( 'g-recaptcha' ).getAttribute("data-sitekey");
					// console.log( 'recaptcha key: '+sitekey );

					grecaptcha.ready(function () {
						grecaptcha.execute( sitekey, { action: q_action }).then(function ( token ) {
							
							// console.log( 'recapatcha token: '+token );
							
							var input = document.createElement( 'input' );// prepare a new input DOM element
							input.setAttribute( 'name','q_recaptcha' ); // set the param name
							input.setAttribute( 'value', token ); // set the value
							input.setAttribute( 'type', 'hidden' ) // set the type, like "hidden" or other
						
							form.appendChild(input); // append the input to the form

							// confirm ##
							q_snack({
								content:    'Houston... Tranquility base here. The Eagle has landed.', // msg ##
								timeout:    -1, // never timeout ##
								style: 		'warning'
							});
							
							// in case we go again ..
							// grecaptcha.reset();

							if (
								form.checkValidity() === true
							) {

								// console.log( 'OK to submit..' );

								// submit ##
								form.submit();

							}

						});
					});
				}

			}, false);
		});
	}, false);
})();

Process $_POST submission

In this example, for a WordPress registation page, the data is process in PHP

register.php

protected static function validate(){

	// h::log( 'e:>validate Registration... ' );
	h::log( $_POST );

	// check to make sure user registration is enabled
        if ( 
		! \get_option( 'users_can_register' ) 
		|| false == \get_option( 'users_can_register' )
	){

		self::$code = 'f10';

		return false;

	}

	if ( 
		! isset( $_POST['q_registration_nonce'] )
		|| ! \wp_verify_nonce( $_POST['q_registration_nonce'], 'q_registration_nonce') 
	){

		self::$code = 'f3';

		return false;

	}
		
	// no recaptcha ##
	if ( 
		! isset( $_POST['q_recaptcha'] )
	){

		self::$code = 'f12';

		return false;

	}

	// get the action ##
	$action = \sanitize_text_field( $_POST['q_action'] );
	// h::log( 'action: '.$action );

	// check if reCaptcha has been validated by Google      
	$recaptcha_secret = \apply_filters( "q/google/recaptcha/secret", false );
	// h::log( '$secret: '.$recaptcha_secret );

	// prepare the remote post ##
	$recaptcha_post = urlencode( \sanitize_text_field( $_POST['q_recaptcha'] ) );
	// h::log( '$recaptcha_post: '.$recaptcha_post );

	// get the host name without any protocol ##
	$host_name = str_replace( [ 'http://', 'http://www.', 'www.'  ], '', \get_site_url() );
	// h::log( '$host_name: '.$host_name );
		 
	// sends post request to the URL and tranforms response to JSON
	$recaptcha_response = json_decode(
		file_get_contents(
			'https://www.google.com/recaptcha/api/siteverify?secret='.$recaptcha_secret.'&response='.$recaptcha_post
		)
	);

	// h::log( $recaptcha_response );
		 
	// check recaptcha ##
	if( 
		$recaptcha_response->success === false // straight fail ##
		|| $recaptcha_response->action !== $action // action miss=match ##
		|| $recaptcha_response->score <= 0.5 // set your own tolerance.. float compare .. score too low.. reject ##
		|| $recaptcha_response->hostname !== $host_name // validate hostname match ##
	){

		self::$code = 'f11';

		return false;

	}

	if ( 
		! isset( $_POST['user_email'] )
		|| ! isset( $_POST['user_login'] )
	){

		self::$code = 'f4';

		return false;

	}

	// get details + sanitize ##
	$user_login        = \sanitize_user( $_POST["user_login"] );    
	$user_email        = \sanitize_email( $_POST["user_email"] );
		
	// from here, you can do what you need to to validate the passed data .... 
		
}