Need JavaScript validation event if I have validation errors

Get Help
, ,
1

Hello Guys,

I am trying to find a JavaScript Event through which I can check if there are any empty fields or any validation errors and by checking that I can add some custom class to my input boxes and chosen select boxes.

Currently when my page loads I am doing this.

$( document ).ready(function() {
  $('.ginput_container_select').find('select').addClass('form-select');
  $('.ginput_container_text').find('input').addClass('form-control');
  $('.ginput_container_email').find('input').addClass('form-control');
  $('.ginput_container_number').find('input').addClass('form-control');
  
});

But these classes got vanished when I click on submit button with empty values because its gets overwritten.

I have tried below events so far without any luck.

$(document).on(‘gform_post_render’, function(event, form_id, current_page){
//do something
alert(‘aa’);
});
gform.addAction( ‘gform_form_saving_action_’ + event_name , function( form, event ) {
//do something
alert(‘bb’);
}, 10, 2 );

gform.addAction( ‘gform_validation_error_form_editor’ + event_name , function( form, event ) {
alert(‘cc’);
}, 10, 2 );

None of these events get firing for me.

Can someone guide me please how can I achieve this.

Thanks

2

I have also tried below code in my functions.php page but its saying jQuery is not defined.

add_action( 'gform_validation', 'custom_option_editor_script' );
function custom_option_editor_script() {
	?>
	<script type='text/javascript'>
    
      jQuery('.ginput_container_select').find('select').addClass('form-select');
    jQuery('.ginput_container_text').find('input').addClass('form-control');
    jQuery('.ginput_container_email').find('input').addClass('form-control');
    jQuery('.ginput_container_number').find('input').addClass('form-control');
    jQuery('.ginput_container_select').find('select').addClass('form-select');

    jQuery('<span class="input-border"></span>').insertAfter($('.ginput_container_select').find('select'));
    
  </script>
	<?php
}
3

I also tried to use below event without any success.

jQuery(document).bind('gform_post_render', function(){
  alert('ss');
    // code to trigger on AJAX form render

});
4

I even tried below code as well without any success.

(function($) {
  $(document).on('gform_post_render', function(event, form_id, current_page){
alert('asfdf');
  // Add you jQuery here

  });
})(jQuery);
5

It appears that none of the events you have attempted to trigger are firing, suggesting that there may be an issue with the Gravity Forms JavaScript API. To resolve this, you may need to contact the Gravity Forms support team for further assistance.

Alternatively, you could try wrapping your JavaScript code inside a function and calling it on form submission instead of relying on events. For instance:

$(document).ready(function() {
  addClasses();

  $('form').submit(function() {
    addClasses();
  });
});

function addClasses() {
  $('.ginput_container_select').find('select').addClass('form-select');
  $('.ginput_container_text').find('input').addClass('form-control');
  $('.ginput_container_email').find('input').addClass('form-control');
  $('.ginput_container_number').find('input').addClass('form-control');
}
6

Hi @faisalahammad

Thanks for your reply.

However, I wanted to use one of the Gravity Forms events, actions only and hence I used following PHP code (functions.php file) to achieve the same what I wanted.

add_action( 'gform_register_init_scripts', 'gform_section_tabs' );
function gform_section_tabs( $form ) {
  
    $script = "(function($){
      
      $('.ginput_container_select').find('select').addClass('form-select');
      $('.ginput_container_text').find('input').addClass('form-control');
      $('.ginput_container_email').find('input').addClass('form-control');
      $('.ginput_container_number').find('input').addClass('form-control');
      $('.ginput_container_select').find('select').addClass('form-select');      
      
    })(jQuery);";

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

Thanks again all for support.

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.