[Forminator] Hide Submit Button - Hides the "submit" button until all required fields are filled.

wpmudev-forminator-hide-submit-button.php

<?php
/**
 * Plugin Name: [Forminator] Hide Submit Button
 * Plugin URI: https://wpmudev.com
 * Description: Hides the "submit" button until all required fields are filled.
 * Author: Glauber Silva @ WPMUDEV
 * Author URI: https://wpmudev.com
 * Jira Task: SLS-3194
 * License: GPLv2 or later
 *
 * @package WPMUDEV_Forminator_Hide_Submit_Button
 */

defined( 'ABSPATH' ) || exit;

function wpmudev_forminator_automatic_actions( $html ) {

	/**
	 * To active this snippet for specific forms, 
	 * edit the array below inserting the form ids 
	 * separate by comma like this example: $form_ids = array( 100,854,67 );
	 */
	$form_ids = array(  );

	/**
	 * To active this snippet for all forms and ignore 
	 * the form ids setup above, just change the $enable 
	 * value for true like this: $enable = True;
	 */
	$enable = false;

	if ( ! $enable ) {

		foreach ($form_ids as $form_id ) {
			if ( false !== strpos( $html, 'forminator-custom-form-' . $form_id ) ) {
				$enable = true;
				break;
			}
		}

		if ( ! $enable ) {
			return $html;
		}
	}

	ob_start();

	?>
		<script type="text/javascript">

			function readyHandler() {

				function isRequiredField( field ) {
					var required = true;
					if (
						null === field ||
						null === field.closest( '.forminator-col' ) ||
						null === field.closest( '.forminator-col' ).querySelector( 'span.forminator-required' )
					) {
						required = false;
					}
					return required;
				}

				var all_fields = document.querySelectorAll('.forminator-input, .forminator-radio input, .forminator-checkbox input, select, textarea');
                if ( !! all_fields ) {
                    for ( var i = 0, max = all_fields.length; i < max; i++ ) {
						if ( isRequiredField( all_fields[i] ) ) {
							observeThis( all_fields[i] );
						}
                    }
                }

				function observeThis( target ) {
					// Create an observer instance
					var observer = new MutationObserver( function( mutations ) {                        						
						maybeDisplaySubmitBtn( target );						
					});
					// Configuration of the observer
					var config = {						
						attributes: true,						
						childList: true,
						characterData: true,
					};
					// Pass in the target node, as well as the observer options
					observer.observe( target, config );
				}
        
                function maybeDisplaySubmitBtn( target ) {
					
					var can_submit = true;												
					var forminatorField = document.querySelectorAll( '.forminator-field' );				
					
					if ( !! forminatorField ) {

						var checked = false;
						var choices = '';
						var others = ''						

						for ( var n = 0, maxFields = forminatorField.length; n < maxFields; n++ ) {

							can_submit = true;
							choices    = forminatorField[n].querySelectorAll('.forminator-radio input, .forminator-checkbox input');
							others     = forminatorField[n].querySelectorAll('.forminator-input, select, textarea');

							if ( choices.length ) {												
								for ( var i = 0, max = choices.length; i < max; i++ ) {
									if ( ! isRequiredField( choices[i] ) ) continue;
									can_submit = false;
									if ( choices[i].checked ) {
										can_submit = true;
										break;
									}
								}
							}
							if ( ! can_submit ) break;

							if ( others.length ) {								
								for ( var i = 0, max = others.length; i < max; i++ ) {									
									if ( isRequiredField( others[i] ) && ! others[i].value ) {
										can_submit = false;
										break;
									}									
								}
							}
							if ( ! can_submit ) break;					
						}
					}
										
					var btn_submit = document.querySelector( '.forminator-button-submit' );
					if ( !! btn_submit ) {
						if ( can_submit ) {
							btn_submit.classList.remove( 'forminator-hidden' );
						} else {
							btn_submit.classList.add( 'forminator-hidden' );
						}
					}
                }
			}

			// Check if the DOMContentLoaded has already been completed
			if ( document.readyState !== 'loading' ) {
				readyHandler();
			} else {
				document.addEventListener( 'DOMContentLoaded', readyHandler );
			}
		</script>
	<?php

	$javascript = ob_get_clean();

    return $html . $javascript; // phpcs:ignore
}
add_filter( 'forminator_render_form_markup', 'wpmudev_forminator_automatic_actions', PHP_INT_MAX );