Using Vuelidate to verify address data from API

Ken — Thu, 13 Jul 2023 08:19:48 +0000

(Cover photo by Liza Summer on pexels.com)

Background of the problem

Different shopfronts under our organization have their individual checkout processes. In pursuit of a single branding, our organization have now started the initiative of having a centralized checkout. So far, we have successfully migrated two shopfronts and are looking to add more in the next couple of years.

But with this endeavor comes the responsibility of sanitizing existing data from the shopfronts. Some shopfronts previously have collected address data from customers using their own validation rules. Now, these addresses have to be formatted to satisfy the rules set by the central ecommerce platform and order fulfillment system. All is well with customers who have input their address using the central checkout platform, but it's problematic with those whose addresses were input elsewhere. A malformed address data causes us problems down the line when we fulfill the order.

Thesis

We use the Vuelidate plugin to help us validate input data as the customer fills out the address form. We wondered if we can reuse the same plugin for validating address data fetched from the API so we can also reuse the validation rules which were created for the address form. After a few days of scouring the internet for solutions, this Github gist gave us the idea that it could be possible.

Proposed solution

The Vuelidate plugin can only be used inside the context of a Vue component. In the Github gist example, the author used Vuelidate inside a "virtual" Vue component—one which will not be rendered.

We have a separate file that contains helper functions for validating the address form. Below is a snippet of it.

In the component object returned by the createValidator() helper function, the validations property gives a preview into the format of the address data. However, in order to run the validation, the address data value must be referenced within the component context, hence the computed property. Below is a snippet of how we use the helper function in our Vuex store.

In our order confirmation page, we fetch the customer's address. Upon getting a response from the API endpoint, we invoke the helper function and the $touch() method to check if the customer's address is malformed. If so, in our case, we redirect the customer to the edit address page to correct the errors.

Challenges

In the helper function, we copied the existing validation rules from the Vue component that renders the address form. We have tried extracting these validation rules so we can have a single source of truth. However, it causes an error in rendering the address form when we do. We think that Vue needs the validations property already declared in the component object on runtime, and not be fetched from somewhere.

Let me know if this post has helped you or if you know a better solution that we could have used.

DEV Community: Ken

Using Vuelidate to verify address data from API

Background of the problem

Thesis

Proposed solution

Challenges