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?
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:
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?
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:
However, prior to the update I was using:
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.
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.
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.
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
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.
'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! 🙂
You must be logged in to reply to this topic.
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
💚 Written in @preactjs
💚 Using @tailwindcss
💚 You can use Preact components in Markdown file pic.twitter.com/WqB29fsnrg
© 2020 Advanced Custom Fields. Subscribe