3.0 KiB
Validation data store
See also third-party developers' validation documentation.
The wc/store/validation store contains information about the current validity, visibility, and associated error message of something.
That something is usually a field in the Checkout form, however the data store can be leveraged in other creative ways.
The data store begins as an empty object. Using the setValidationErrors action, errors can be added to the store.
An error is represented by an object and contains two entries, hidden and message. hidden is used by our code to determine whether to show an error or not. Other extensions reading the data store may not honour this and show it anyway regardless of if it is hidden. message contains the message to show to the user.
When the Checkout block loads, various entries are added to the data store for each required field that does not already have a value. These errors have the hidden property set to true.
The reason for this is so we can show an error if a required field is not completed, but showing these errors immediately on page load would be a bad user experience, we keep them hidden until the user interacts with the field, or tries to submit the form.
When the "Place order" button is pressed, the checkout processor reads the value of hasValidationErrors and if it returns true then the checkout process is aborted.
Any fields that were hidden get shown when the "Place order" button is pressed too. This is done using showAllValidationErrors. See the code here
The Checkout processor does not discriminate between errors added by WooCommerce Blocks, and those added by extensions. If the store contains any errors at all, then the checkout will halt and those errors will be shown.
Errors are explicitly shown. i.e. we don't arbitrarily display errors in the data store. Instead, we render specific errors in the place they belong by using their ID. For example, in the checkout form we use ValidatedTextInputs which have a ValidationInputError component associated with them. The text input has an ID, and the associated ValidationInputError renders the error with that ID.