DigitalRefresh
5/5/2019 - 11:00 AM

Scroll to GF Validation Error #GF #mobile #UI

Make Gravity Forms’ validation errors mobile-friendly by scrolling the page down to the first error and give that input focus.
Source: https://gravitywiz.com/make-gravity-forms-validation-errors-mobile-friendlyer/

// Gravity Forms scrolls to give the first validation error focus
\!h add_filter( 'gform_pre_render', 'gf_first_error_focus' );  //To limit this to a specific form, add form id to the end of gform_pre_render_ID#
function gf_first_error_focus( $form ) { 
  add_filter( 'gform_confirmation_anchor_' . $form['id'], '__return_false' );
     ?>
         <script type="text/javascript">
         if( window['jQuery'] ) {
         ( function( $ ) {
         $( document ).bind( 'gform_post_render', function() { 
         var $firstError = $( 'li.gfield.gfield_error:first' );
         if( $firstError.length > 0 ) {
         $firstError.find( 'input, select, textarea' ).eq( 0 ).focus();
         document.body.scrollTop = $firstError.offset().top;
         }
         } );
         } )( jQuery );
         }
         </script>
     <?php 
   return $form;
}