I’ve implemented some back end validation already using acf/validate_save_post for my front end acf_form submission, but I’d like to also add some front end validation so that my users don’t get routed to another page and lose their completed submission because of a typo.
I can validate the form based on what I’m trying to do (making sure that email addresses come from a specific domain) but the problem is, whether I try to use the ACF filter, event.preventDefault(), even a custom button with a click handler, the form always tries to submit the first values. It’s almost as if the values are saved somewhere I am not accessing (not the actual form inputs).
Exactly what happens is that I enter in incorrect form data (use a “gmail.com” address) and I get a Javascript error (Yay!). Then I change the form, the error is hidden, and I hit submit. Rather than displaying the success page, I get an error page from my back end PHP validation and when I echo the email address from the form, it shows up as the first, uncorrected value (“gmail.com”).
Where should I be doing this front end validation? I know I need the back-end but it feels archaic without any feedback before a refresh (not to mention users losing all their input data).
So the way I ended up implementing this was using the acf/validate_save_post action and removing all Javascript validation. By using acf/validate_save_post, you can return Javascript errors using acf_add_validation_error('acf[field_4a5c3fe1d1]', 'some error description');. Notice that you have to use acf[field_id] in this, you cannot use a post value UNLESS it is an additional field in the front end form. This took a day of debugging and I would love it if the documentation was updated for this use case. For those of you trying this and slamming your head against the wall, just make sure to use acf/validate__save_post, acf_add_validation_error, and use the field ID if it is part of the post’s custom fields. Good luck!
