Support

Account

Register Login

Home › Forums › Bug Reports › 5.7 – AJAX validation broken on acf_form() front-end

Solved

5.7 – AJAX validation broken on acf_form() front-end

  • Hi all,

    I just upgraded to 5.7 and the AJAX validation for front-end forms seems broken.

    Tested it on the WordPress Dashboard and that seems to work fine.

    Anyone else having this issue?

    Cheers

  • Hi guys,

    Any help would be much appreciated.

    I have narrowed it down a bit. Basically I’m loading the form via AJAX and the built-in ACF AJAX validation doesn’t work on submit.

    Having tested the form without loading it via AJAX (directly on a page), it does work.

    Here’s my the “success” part of the AJAX call:

    success: function(data) {

            if(task_action === 'new_task' || task_action === 'update_task') {

                // disable scrolling
                $('body').addClass('no__scroll');

                // remove spinner
                $('.huub__tasks__edit .huub__loading').removeClass('is__loading');

                // add data
                $('#huub_tasks_form').append(data);

                /**
                * ACF JS API
                * @see https://www.advancedcustomfields.com/resources/javascript-api/
                */
                // set datepicker options + prefill values
                acf.addFilter('date_time_picker_args', function( args, field ){
                    args['hourMin'] = 9;
                    args['hourMax'] = 19;
                    args['stepMinute'] = 15;
                    args['showSecond'] = false;

                    return args;
                });

                // prefill datepicker values for new tasks
                acf.addAction('date_time_picker_init', function( field ) {

                    if(task_action === 'new_task' && field.closest("#huub_tasks_add_task").length ) {

                        if(field.closest('.acf-field').data('name') === 'task_start_date')  {

                            display_date = moment(task_start).format('D MMMM YYYY h:mm a');
                            return_date = moment(task_start).format('YYYY-MM-DD H:mm:ss');

                        } else if(field.closest('.acf-field').data('name') === 'task_end_date') {

                            display_date = moment(task_end).format('D MMMM YYYY h:mm a');
                            return_date = moment(task_end).format('YYYY-MM-DD H:mm:ss');

                        }

                        field.val(return_date);
                        field.val(display_date);
                    }
                });

                // IMPORTANT: trigger the 'append' acf.do_action within the ajax success function AFTER you have
                // added your data (ie. appended your new HTML). Otherwise the JS for datepicker etc won't work
                acf.doAction('append', $('#huub_tasks_form'));

                // close button
                $('span.huub__tasks__form__close').click(function() {
                    $('body').removeClass('no__scroll');
                    $('.huub__tasks__edit').removeClass('open');
                    $('#huub_tasks_form form').remove();
                });

            }

            // console messages
            if(task_action === 'new_task') {
                console.log('Add new task');

            } else if(task_action === 'update_task') {
                console.log('Update task');

            } else if(task_action === 'resize_task') {
                console.log('Times updated');

            } else if(task_action === 'move_task') {
                console.log('Task moved');
            }

            // $(document).ajaxStop(function( event, request, settings ) {
            //     // off_radar_id?
            //     if(remote_task_id) {
            //         // remove any previous added projects
            //         $('a.acf-icon.-minus[data-name="remove_item"]').trigger('click');
            //         $('span.acf-rel-item[data-id="'+remote_task_id+'"]').trigger('click');
            //     }
            // });

        },

    As you can see, I have added acf.doAction('append', $('#huub_tasks_form')); after appending the data returned. Everything on the form works fine, even a Relationship field and its AJAX.

    It’s only when submitting it that it takes you to a separate page with the errors instead of validating via AJAX. Having looked at the “Headers” tab in Chrome, I can see that action: acf/validate_save_post isn’t there.

    Is there anything I’m missing after loading the form via AJAX?

    Thanks!

  • Please? 🙂

  • My guess is that the form is not being initialize correctly because it is being loaded after the acf scripts that are run. there is a similar question here that was not solved. Actually there have been several and I don’t know if any of them have been answered https://www.google.com/search?q=acf+initialize+ajax+load+acf+form+site:support.advancedcustomfields.com

  • You could try the solution from E here https://support.advancedcustomfields.com/forums/topic/using-acf-form-in-ajax-call/

  • Thanks for replying John 🙂

    I am actually using that solution from Elliot:

    acf.doAction('append', $('#huub_tasks_form'));

    However, prior to the update I was using:

    acf.do_action('append', $('#huub_tasks_form'));

    Which is the old way, right?

    The strange thing is, all fields work perfectly. I even have a relationship field that gets loaded without any problems, and even the AJAX search and infinite scroll work. Select2 fields also work. Tabs work. Conditional logic works. The lot.

    But it’s only when submitting the form that if, for instance, I have not selected an item from the relationship field, the AJAX validation does not work and I am taken to the typical WordPress error screen displaying the validation message.

    I have acf_form_head() included in the header but perhaps I need to include it again in the PHP file that contains the AJAX action?

  • Usually, when you get the ACF error screen instead of the AJAX validation working it means that there is a PHP error someplace, happening during the AJAX request that is causing the request to fail. I would turn on error logging and see if there are any warnings or errors during the ajax request. https://codex.wordpress.org/WP_DEBUG

  • Just did that and I get no errors or Notices 🙁

    Another thing I’ve tried is to simply place the form on a template, without loading it via AJAX (which works). I then copied the code generated by acf_form(). Then, I also copied the code generated by acf_form() after it had loaded via AJAX on a modal.

    I saved them both on separate text files and did a DIFF. The one on the modal doesn’t seem to be loading quite a few CSS classes and divs that seem to be related to validation.

    See screenshot of DIFF here.

    Is there any other JS actions you can think of that I need to include? Adding acf_form_head() to the PHP AJAX call didn’t help, I’m afraid.

  • 
acf.do_action('append', $('#huub_tasks_form'));

    the form ID on the right is ‘huub_tasks_add_tasks’

  • Sorry yes a bit confusing as I just dropped the tasks form where it didn’t belong.

    #huub_tasks_form is the modal DIV wrapper (as Elliot suggests in his answer), not the actual ID of the form. I have tried different IDs as well and no luck 🙁

    Really stuck here, because everything was working before the rewrite of the JS API. It’s as if acf.do_action('append', $('#popup_id')); isn’t loading something that was loading before? Don’t know 🙁

    As I mentioned, EVERYTHING JS related in the form works, except for the AJAX validation.

  • I am going to have to circle back around to a problem in the AJAX request, even though you are not getting any errors. When you get the error page telling you that there are errors after the submission I’ve always found that eventually it is in the PHP code. Do you have any custom validation going on?

  • Nope, not using acf/validate_value anywhere if that’s what you mean? Also not using any JS validation anywhere.

    In the Dev Tools Network tab, the difference I can see when the form submits is that when the form has been loaded via AJAX, the form data is missing these:

    action: acf/validate_save_post
nonce: 2ddf40b87f
post_id: new_post

  • going back I think I’m lost

    What does this mean

    It’s only when submitting it that it takes you to a separate page with the errors instead of validating via AJAX. Having looked at the “Headers” tab in Chrome, I can see that action: acf/validate_save_post isn’t there.

  • No worries, must be difficult to understand everyone’s coding problems! 🙂

    When the form is loaded via AJAX in a modal, everything in the form works: Relationship field, conditional logic, etc. If I fill in all required fields (Relationship field is required), the form submits fine and the new post is created.

    It’s when I leave that field empty that ACF should validate it and show the typical red error box for that field. Instead, I’m taken to a page with the validation errors.

    Now, if I load the form on a page template, validation does work and if I leave empty the relationship field, I get the error on the actual form.

    That’s why I was asking if there’s anything else I should call in the success callback of the AJAX call apart from acf.do_action('append', $('#popup_id'));?

  • After all of this, I don’t know. There must be something in the append action that has changes since E posted that solution. I’m going around in circles looking at the JS code. You might want to try to contact the regular support and see if they can help. https://www.advancedcustomfields.com/contact/

  • Thanks John, really appreciate the help. I will contact support and see if we can figure it out 🙂

    One last thing… I kept a copy of the ACF (Pro) version that was working: 5.6.10. When I put that back validation works. Maybe that gives some pointers as to what might be causing the issue?

    Anyway, thanks again. If we find a solution I will post it here 🙂

  • The new JS API was introduced in version 5.7. The reason that 5.6 is working is that you’ve reverted the ACF JS files.

  • I’m running into the same problem with Version 5.8.1 (I keep being sent to the WordPress error page when I hit submit on a form that is loaded through AJAX, if some of the required fields are not filled out).

    I found part of a solution. AJAX validation does work for required fields if I add acf_form() somewhere on the page itself.

    You can’t only have acf_form() in an AJAX action. It has to be on the page also. Otherwise it seems acf_form_head() would just assume there is no acf_form() on the page at all. I guess that’s why AJAX validation didn’t work.

    I don’t actually want there to be two forms on the page, so I just put acf_form() in the page template like this:
    <?php acf_form(array('form' => false,)); ?>

    So that this extra acf_form() is invisible on the page, and the acf_form() in my AJAX action is the only one that actually submits any data.

    Now another problem: on submit, I’m redirected to (my-site-url)/wp-admin/admin-ajax.php?updated=true, instead of staying at the same url. The data submitted is still saved, though.

    Adding 'return' => '(url-to-redirect-to)', to my AJAX acf_form() does work, so at least there is a way to cobble together something that looks okay. All I have to do is add a redirect to a thank you page.

  • Oh my! That worked @becleung 🙂

    I had already set a return URL on the AJAX form, so happy days!

    It’s all bit hacky though, because I have several acf_form() on different pages and I had to target the specific page where my AJAX form loads the additional acf_form(array('form' => false)); suggested by @becleung. Otherwise, the other forms look all over the place after submission.

    What I don’t understand is why calling acf_form_head() on the AJAX call does not work?

    Hopefully the guys at ACF will find a solution but in the meantime, a million thanks @becleung! 🙂

Viewing 19 posts - 1 through 19 (of 19 total)

The topic ‘5.7 – AJAX validation broken on acf_form() front-end’ is closed to new replies.