Troubleshooting JS validation

The LokiComponents module offers Alpine-based components that are validated both client-side and server-side. You can only proceed to the next step, when both validations are successfull. Until that time, the button to go to the next step (the component LokiCheckoutStepForwardButton) is disabled because its valid flag is false.

It might happen that certain components fail to properly set their valid flag. And because of this, the button remains unusable. If this is the case, the following helps you analyse what is going on.

First of all, you can simply reset the button with the following:

Alpine.store('LokiCheckout').get('LokiCheckoutStepsBillingForwardButton').valid = true;

This makes sure you can click upon the button again. After this, the validation is re-executed again. It might be that you are then bumping into the same issue again. At this moment, it might be useful to inspect which components are actually invalid for a specific step. For example:

Alpine.store('LokiCheckout').getInvalidComponentIds('shipping');