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

• elmediano

• January 24, 2019 at 5:17 am

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!