Gutenberg compatibility for PHP/AJAX Validation

[elliotcondon]

Description

A highly used feature in ACF is our PHP validation powered via AJAX. This allows developers to highly customize the validation process via PHP whist providing convenient feedback to the user when a field value does not meet its requirements.

To do this, we use JS to intercept the "submit" action on the form and stop it. We then send all $_POST data via an AJAX request and use the returned JSON to either display errors or re-submit the form.

It is important for UX that we validate the form data only when the user clicks the "publish" button.

Issues

• The form "submit" event is never fired, so our AJAX validation is never triggered.

Questions

• What can we "hook" into to prevent the post from being submit in order to validate via AJAX and then re-submit?
• How can we get all the $_POST data about the post (title, content, etc)?
• How can we re-submit the form after validation is complete?
• Is there an API for displaying an error message in Gutenberg?

[elliotcondon]

@noisysocks Adding Gutenberg compatibility for PHP/AJAX Validation will be our next focus.

Thanks for the info provided over on the original ticket. I added an extra note in the topic above:
"It is important for UX that we validate the form data only when the user clicks the "publish" button."

Can we work on a solution for validating the form data via AJAX that also keeps the above in mind?

[noisysocks]

Copying some answers over from WordPress/gutenberg#12692 (comment).

• How can we get all the $_POST data about the post (title, content, etc)?

select() and getEditedPostAttribute() are what we want again for this. The REST API reference is useful here for figuring out what post attributes are available.

const { getEditedPostAttribute } = wp.data.select( 'core/editor' );
const title = getEditedPostAttribute( 'title' );
const content = getEditedPostAttribute( 'content' );

• Is there an API for displaying an error message in Gutenberg?

Yes, the Notices API is what we'll want here. Namely, createErrorNotice().

wp.data.dispatch( 'core/notices' ).createErrorNotice( 'Something is not good!' );

[noisysocks]

Can we work on a solution for validating the form data via AJAX that also keeps the above in mind?

Got it. I don't think this is currently possible but it's a new hook that we can discuss adding over in the Gutenberg project.

To clarify: do we need to hook into when the post is being saved, or when the post is being published?

[elliotcondon]

Hi @elliotcondon

We validate the custom field values only when publishing a post, or when updating a published post.
Autosaves and drafts are not validated.

At the moment, we listen to the "form submit" action, and "prevent default" to stop the form from submitting. We then validate the form data via AJAX, and either display errors or re-submit the form (but this time allow the event to run).

[noisysocks]

My current thinking is that ACF could use PluginPrePublishPanel to render a component in the pre-publish panel that:

• Dispatches lockPostSaving() when the component is mounted so that the user can not click Publish.
• Displays some intermittent UI (e.g. a Spinner) to indicate to the user that the post is currently being validated.
• Sends off the AJAX request which validates the current post.
  • If the post is valid, dispatches unlockPostSaving().
  • If the post is invalid, displays some UI which indicates to the user which fields need attention.

Very quick mockup of what this could look like:

Does that make sense? Would this be a workable approach?

[elliotcondon]

Hi @noisysocks

This is a great idea, but will this also work for updating a published post?

[noisysocks]

Hey @elliotcondon. That's a good point. No, unfortunately this won't handle the case where a published post is updated. We may have to add a new filter for this after all. I've suggested this over in WordPress/gutenberg#13413.

[elliotcondon]

Hi @noisysocks

Just following up on this one. Did we get anywhere with a solution to "validate" and "prevent" the form from being submit?

If not yet explored, would it be possible to use a promise object + a JS filter to allow 3rd party (or core) logic to stop/trigger the saving process?

[noisysocks]

Hey @elliotcondon! I like your new avatar 🙂

I haven't been actively working on this. WordPress/gutenberg#13413 tracks adding the API which I prefer which is a promise object + JS filter. WordPress/gutenberg#13718 is an unrelated PR that also had a need for such an API.

@talldan: What's the status on WordPress/gutenberg#13718? Do you think we can include the mentioned API?

[matgargano]

Any update here?

[elliotcondon]

@matgargano - Not from my end. I'm still waiting for WordPress to add in some sort of action/filter to hook in and customize the saving process.

[benbowler]

Is there a ticket on the Wordpress side we can comment on/contribute to?