Gravity Wiz // Gravity Forms // Disable Submit Button Until Required Fields are Field Out

gw-gravity-forms-disable-submit.php

<?php
/**
 * WARNING! THIS SNIPPET MAY BE OUTDATED.
 * The latest version of this snippet can be found in the Gravity Wiz Snippet Library:
 * https://github.com/gravitywiz/snippet-library/blob/master/gravity-forms/gw-disable-submit-button-until-required-fields-are-filled-out.php
 */
/**
* Gravity Wiz // Gravity Forms // Disable Submit Button Until Required Fields are Field Out
*
* Disable submit buttones until all required fields have been filled out. Currently only supports single-page forms.
*
* @version	 1.0
* @author    David Smith <david@gravitywiz.com>
* @license   GPL-2.0+
* @link      http://gravitywiz.com/...
* @copyright 2013 Gravity Wiz
*/
class GW_Disable_Submit {

    public static $script_output = false;

    public function __construct( $form_id ) {

        add_action( "gform_pre_render_{$form_id}", array( $this, 'maybe_output_script' ) );
        add_action( "gform_register_init_scripts_{$form_id}", array( $this, 'add_init_script' ) );

    }

    public function maybe_output_script( $form ) {

        if( ! self::$script_output ) {
            $this->script();
            self::$script_output = true;
        }

        return $form;
    }

    public function script() {
        ?>

        <script type="text/javascript">

            var GWDisableSubmit;

            (function($){

                GWDisableSubmit = function( args ) {

                    var self = this;

                    // copy all args to current object: formId, fieldId
                    for( prop in args ) {
                        if( args.hasOwnProperty( prop ) )
                            self[prop] = args[prop];
                    }

                    self.init = function() {

                        $( args.inputHtmlIds.join( ', ' ) ).change( function() {
                            self.runCheck();
                        } );

                        self.runCheck();

                    }

                    self.runCheck = function() {

                        var submitButton = $( '#gform_submit_button_' + self.formId );

                        if( self.areRequiredPopulated() ) {
                            submitButton.attr( 'disabled', false ).removeClass( 'gwds-disabled' );
                        } else {
                            submitButton.attr( 'disabled', true ).addClass( 'gwds-disabled' );
                        }

                    }

                    self.areRequiredPopulated = function() {

                        var inputs     = $( args.inputHtmlIds.join( ', ' ) ),
                            inputCount = inputs.length,
                            fullCount  = 0;

                        $( inputs ).each( function() {

                            var input   = $( this ),
                                fieldId = input.attr( 'id' ).split( '_' )[2];

                            // don't count fields hidden via conditional logic towards the inputCount
                            if( window['gf_check_field_rule'] && gf_check_field_rule( self.formId, fieldId, null, null ) == 'hide' ) {
                                inputCount -= 1;
                                return;
                            }

                            if( $.trim( $( this ).val() ) ) {
                                fullCount += 1;
                            } else {
                                return false;
                            }

                        } );

                        return fullCount == inputCount;
                    }

                    self.init();

                }

            })(jQuery);

        </script>

        <?php
    }

    public function add_init_script( $form ) {

        $args = array(
            'formId'       => $form['id'],
            'inputHtmlIds' => $this->get_required_input_html_ids( $form )
        );

        $script = '; new GWDisableSubmit( ' . json_encode( $args ) . ' );';
        $slug = "gw_disable_submit_{$form['id']}";

        GFFormDisplay::add_init_script( $form['id'], $slug, GFFormDisplay::ON_PAGE_RENDER, $script );

    }

    public function get_required_input_html_ids( $form ) {

        $html_ids = '';

        foreach( $form['fields'] as &$field ) {

            if( ! $field['isRequired'] )
                continue;

            $input_ids = false;

            switch( GFFormsModel::get_input_type( $field ) ) {

                case 'address':
                    $input_ids = array( 1, 3, 4, 5, 6 );
                    break;

                case 'name':
                    $input_ids = array( 1, 2, 3, 4, 5, 6 );
                    break;

                default:
                    $html_ids[] = "#input_{$form['id']}_{$field['id']}";
                    break;

            }

            if( ! $input_ids )
                continue;

            foreach( $input_ids as $input_id ) {
                $html_ids[] = "#input_{$form['id']}_{$field['id']}_{$input_id}";
            }

        }

        return $html_ids;
    }

}

# Configuration

new GW_Disable_Submit( 534 );

which folder should i upload this file to get it to work?

Crash course here: https://gravitywiz.com/documentation/snippet-troubleshooting/

Can this be applied to only work on one, or a set of specific pages?

@anakaine As in, you are embedding the form on multiple pages and only want this to be applied to the form on a specific page?

@spivurno As in, by way of example, I have form ID 15 and form ID 17 and I only want this validation script to apply to those forms. They're embedded on Page ID 300 and Page ID 500.

Also, what does the final line in the script do? "new GW_Disable_Submit( 534 );"

@anakaine You can duplicate the last line for each of your forms.

new GW_Disable_Submit( 15 );
new GW_Disable_Submit( 17 );

Pro tip: don't duplicate the entire snippet. 😄

Hello @spivurno, I'm getting this error when I save it https://prnt.sc/10t0mp0

@adcadesigns Hm, not immediately obvious why that variable is a string at the time that error is generated. Happy to dig in via support: https://gravitywiz.com/support/

👉 This Gist has been migrated to the Gravity Wiz Snippet Library:

https://github.com/gravitywiz/snippet-library/blob/master/gravity-forms/gw-disable-submit-button-until-required-fields-are-filled-out.php