jQuery + Gravity Forms: Perform jQuery on bad validation

3 Views

I use some jQuery on a current gravity form. However, when I submit the form and it comes back with bad validation, I lose some of the jQuery targets.

I’m curious how I can swap out $(document).ready(function() { with something that will call my jQuery once the fields are reloaded with bad validation.

Read More

I’ve tried $("#gform_submit_button_1").click(function() { however, that’s too soon. It needs to happen when the new fields come back from ajax.

Post Views: 3

Related posts

Leave a Reply

4 comments

  1. There is actually a hook provided for use here: gform_post_render

    This jQuery hook is fired every time the form is rendered to allow custom jQuery to be executed. This includes initial form load, going to the next/previous page on multi-page forms, form rendered with validation errors, confirmation message displayed, etc.

    jQuery(document).bind('gform_post_render', function(){

    // code to trigger on AJAX form render

});

    http://www.gravityhelp.com/documentation/gravity-forms/extending-gravity-forms/hooks/javascript/gform_post_render/

  2. For some reason Gravity Forms still hasn’t added a jQuery hook for failed form validation. What they recommend doing is checking for the existence of div.validation_error.

    jQuery(document).on('gform_post_render', function(e, form_id) {
    if ( jQuery('div.validation_error').length > 0 ) {
        console.log('Form validation error.');
    }
});

    You’ll notice I’m not specifying a parent when I check for the validation error element: jQuery('div.validation_error'). If you have multiple forms on the page this would cause issues. The form_id parameter that is returned contains the form’s ID in the database (e.g. 1, 2, 35, etc.) but I’m not sure if this value matches the forms ID in the HTML, e.g. <form id="gform_1">. If it does match, then it’s good practice to specify the parent, so you could do:

    if ( jQuery('div.validation_error', '#gform_' + form_id).length > 0 ) {

    Maybe somebody else could weigh in and let us know if the form’s HTML ID will always match the form’s database ID.

  3. Gravity forms does supply a gform_confirmation_loaded hook, but I don’t think this will work in your case since it’s not loading the confirmation, but the error state form. They don’t have a hook for this but I’ve had success using jquery delegated events. I use the .gform_wrapper as my first selector and then target the fields I want to actually target.

    See this documentation for more info:

  4. One solution is: catch the submit event and start a interval that checks your form for changes and then calls your function:

    $('#your-form').submit(function(){
    html = $('#your-form').html();
    iv = setInterval(function(){
        If($('#your-form').html != html){
            yourfunc();
            clearInterval(iv);
        }
    }, 200);
});

function yourfunc(){
    //your stuff   
}

    This is however not very neat and it will only work if the html is actually changed after the Ajax call.