PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Create placeholder and keep placeholder while using ajax during validation

  1. daanvh
    Member

    Hi,

    This is not a question, but I have struggled a bit with this and thought that if others did as well, they don't need to purchase a gravity perks piece of software which is actually more expensive than the plugin itself.

    I ran into the problem that 1) I needed placeholders instead of labels for my field, and with that solved, I experienced that these placeholders were being removed on form validation errors when using ajax.

    Its not a very clean fix, but with a little help of javascript I managed to solve my problem.

    1) create a 'custom' validation error message in functions.php

    add the following code to functions.php:

    add_filter("gform_validation_message_1", "change_message", 10, 2);
    function change_message($message, $form){
      return "<script>placeholder();</script><p>This is your validation error text</p>" . $form["contact"];
    
    }

    Notice I included a javascript function, that's for later. Documentation on this: http://www.gravityhelp.com/documentation/page/Gform_validation_message

    Now also put in the code that will add placeholder fields in GF (in functions.php):

    /* Copy this code in the functions.php file */
    add_action("gform_field_standard_settings", "my_standard_settings", 10, 2);
    function my_standard_settings($position, $form_id){
        // Create settings on position 25 (right after Field Label)
        if($position == 25){
            ?>
            <li style="display: list-item; ">
                <label for="field_placeholder">Placeholder Text
                    <!-- Tooltip to help users understand what this field does -->
                    <a href="javascript:void(0);" tooltip="<h6>Placeholder</h6>Enter the placeholder/default text for this field.">(?)</a>
                </label>
                <input type="text" id="field_placeholder" size="35" onkeyup="SetFieldProperty('placeholder', this.value);">
            </li>
            <?php
        }
    }
    
    /* Copy this code in the functions.php file */
    add_action("gform_editor_js", "my_gform_editor_js");
    function my_gform_editor_js(){
        ?>
        <script>
            //binding to the load field settings event to initialize the checkbox
            jQuery(document).bind("gform_load_field_settings", function(event, field, form){
                jQuery("#field_placeholder").val(field["placeholder"]);
            });
        </script>
        <?php
    }
    
    /* Copy this code in the functions.php file */
    add_action('gform_enqueue_scripts',"my_gform_enqueue_scripts", 10, 2);
    function my_gform_enqueue_scripts($form, $is_ajax=false){
        ?>
    
    <script>
        jQuery(function(){
            <?php
            /* Go through each one of the form fields */
            foreach($form['fields'] as $i=>$field){
                /* Check if the field has an assigned placeholder */
                if(isset($field['placeholder']) && !empty($field['placeholder'])){
                    /* If a placeholder text exists, inject it as a new property to the field using jQuery */
                    ?>
                    jQuery('#input_<?php echo $form['id']?>_<?php echo $field['id']?>').attr('placeholder','<?php echo $field['placeholder']?>');
                    <?php
                }
            }
            ?>
        });
        </script>
        <?php
    }

    script source: http://www.bogdan-nikolic.com/wordpress-gravity-forms-placeholder-which-works-with-ajax-validation/#comment-100 (it says it works with ajax but for me it doesnt after form validation errors)

    Now lastly, add the function you added in the error message to your page:

    <script>
    
    	function placeholder() {
    	 $('#input_1_1').attr('placeholder','Message *');
         $('#input_1_2').attr('placeholder','Name *');
      }
    
    </script>

    I just created 2 for the fields with id input_1_1 and 1_2, but you can figure it out.

    Again, not a clean fix, but a fix. if anyone knows a cleaner solution (via functions.php) I am happy to hear from you.

    Posted 6 years ago on Friday June 21, 2013 | Permalink
  2. Richard Vav
    Administrator

    You might want to take a look at the following topic which is also about adding placeholders that work with ajax and remain when the form fails validation http://www.gravityhelp.com/forums/topic/gform_enqueue_scripts-injects-script-into-iframe-on-validation-error

    Posted 6 years ago on Friday June 21, 2013 | Permalink