acf_form Validation in Block

• Nugerama

• November 28, 2023 at 9:40 am

I’ve built a handy ‘contact form’ block for my client via which they can choose from several baked in form variations, as well as button text, colour, etc, all of which render beautifully in the block editor so they know what they’re getting.

However, some of my acf_form fields are mandatory and fail validation when the post or page is saved. I originally got around this by using acf/load_field (see below) to remove validation if being viewed in the block editor (is_admin()) and while that does solve the admin issue it’s causing problems with the Ajax validation on the front end so that when my consent checkbox fails, instead of showing the little warning it loads a new error page saying “validation failed”.

if( is_admin() && 'acf-field-group' !== get_post_type() ):

	$field['required'] = false;
endif;
return $field;

Is there a better method for preventing or turning off field validation just when an acf_form is being rendered in the block editor?

I found the same question being asked of ACF Extended but their solution was to prevent block editor rendering of the form entirely which would really detract from the usefulness of this block.

Any recommendations will be very grateful received.

• John Huebner

• December 1, 2023 at 11:37 am

The problem is that when ACF validates the fields this is done using AJAX and is_admin() is always true during AJAX requests, so the field is not required during the AJAX request but then it is required during the submission of the form.

You also need to check wp_doing_ajax() and not remove the field requirement then as well.

• Nugerama

• December 5, 2023 at 2:41 pm

Thanks, John. Sadly this solution didn’t work for me. My best guess is it’s because wp_doing_ajax() returns true both on the front end-submit and in the block editor.

I’ve got around it though by using ACF JS and just returning return { valid: 1 }; JSON response for all forms and just loading that script in WP Admin.

acf.add_filter('validation_complete', function( json, $form ){

	// return
	return { valid: 1 };
});

• John Huebner

• December 5, 2023 at 3:19 pm

I had a feeling that it would not work in the editor.

Have you thought about trying to use the function get_current_screen().

This function only exists on an admin page load and does not exist during AJAX requests. Testing to see if this function exists or not could tell you if it was the page load or not.

• Nugerama

• December 6, 2023 at 7:32 am

Thanks, John. I tried that but it didn’t seem to affect the Ajax validation, only the fields appearance. The JS solution is working well though so I’m going to run with that having now added in a check to see if the targeted for is being validated and ‘passing’ it if so:

acf.add_filter('validation_complete', function( json ){

	var	match 	= false,
		val 	= "acf[field_123xyz]";

	$.each( json.errors, function( index, value ){
		if( value.input == val ) match = true;
	} )

	return match ? { valid: 1 } : json;
});