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).
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_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_add_validation_error, and use the field ID if it is part of the post’s custom fields. Good luck!